Оборачиваем каждую 3 блоки div в div
можно использовать nth-child
селекторы для обертывания 3 divs с помощью .wrapAll
? Кажется, я не могу решить правильное уравнение.
так...
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
становится...
<div>
<div class="new">
<div></div>
<div></div>
<div></div>
</div>
<div class="new">
<div></div>
<div></div>
<div></div>
</div>
</div>
6 ответов
вы можете сделать это с помощью .slice()
, например:
var divs = $("div > div");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='new'></div>");
}
вы можете попробовать демо здесь, все, что мы делаем здесь, это получение элементов, которые вы хотите обернуть и зацикливание через них, делая .wrapAll()
в партиях по 3, затем переход к следующему 3 и т. д. Он будет обернуть 3 за раз и сколько осталось в конце, например, 3, 3, 3, 2, если это так.
Я написал общую функцию chunk, которая делает это довольно легко сделать:
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
$("div > div").chunk(3).wrap('<div class="new"></div>');
$.fn.chunk = function(size) {
var arr = [];
for (var i = 0; i < this.length; i += size) {
arr.push(this.slice(i, i + size));
}
return this.pushStack(arr, "chunk", size);
}
$("div > div").chunk(3).wrap('<div class="new"></div>');
div > div {
width: 50px;
height: 50px;
background: blue;
margin: 2px;
float: left;
}
div.new {
background: red;
height: auto;
width: auto;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Плагин
$(function() {
$.fn.EveryWhat = function(arg1) {
var arr = [];
if($.isNumeric(arg1)) {
$.each(this, function(idx, item) {
var newNum = idx + 1;
if(newNum%arg1 == 0)
arr.push(item);
});
}
return this.pushStack(arr, "EveryWhat", "");
}
});
как его использовать.
вызов EveryWhat()
на элементе и положить в число для каждого элемента, который вы хотели бы собрать.
$("div").EveryWhat(2).wrapInner('<div class="new" />');
кавычки wrapinner должны иметь правильно отформатированный <div class="new" />
С классом и закрывающим тегом. Stackoverflow не позволяет мне показать, как это выглядит, но вот ссылка на самозакрывающийся div.
как это должно выглядеть
это обернет каждый другой номер, который вы указали. Я использую jquery 1.8.2. поэтому помните, что используйте selector call EveryWhat(3)
и номер для каждого времени. Конечно, положив его в нижней части страницы или обернув его в
$(document).ready(function() {
//place above code here
});
вы можете использовать каждый nth, а затем .wrapInner('<div class="new" />')
для тех же результатов.
вот более полезная версия Ника выше:
window.WrapMatch = function(sel, count, className){
for(var i = 0; i < sel.length; i+=count) {
sel.slice(i, i+count).wrapAll('<div class="'+className+'" />');
}
}
вы бы использовали это как:
var ele = $('#menu > ul > li');
window.WrapMatch(ele, 5, 'new-class-name');
окно должно быть заменено пространством имен обработчиков, конечно.
Обновлено: немного лучшая версия, которая использует jQuery
(function($){
$.fn.wrapMatch = function(count, className) {
var length = this.length;
for(var i = 0; i < length ; i+=count) {
this.slice(i, i+count).wrapAll('<div '+((typeof className == 'string')?'class="'+className+'"':'')+'/>');
}
return this;
};
})(jQuery);
как использовать:
$('.list-parent li').wrapMatch(5,'newclass');
второй параметр для имени оболочки является необязательным.
$(function() {
$.fn.WrapThis = function(arg1, arg2) { /*=Takes 2 arguments, arg1 is how many elements to wrap together, arg2 is the element to wrap*/
var wrapClass = "column"; //=Set class name for wrapping element
var itemLength = $(this).find(arg2).length; //=Get the total length of elements
var remainder = itemLength%arg1; //=Calculate the remainder for the last array
var lastArray = itemLength - remainder; //=Calculate where the last array should begin
var arr = [];
if($.isNumeric(arg1))
{
$(this).find(arg2).each(function(idx, item) {
var newNum = idx + 1;
if(newNum%arg1 !== 0 && newNum <= lastArray){
arr.push(item);
}
else if(newNum%arg1 == 0 && newNum <= lastArray) {
arr.push(item);
var column = $(this).pushStack(arr);
column.wrapAll('<div class="' + wrapClass + '"/>'); //=If the array reaches arg1 setting then wrap the array in a column
arr = [];
}
else if(newNum > lastArray && newNum !== itemLength){ //=If newNum is greater than the lastArray setting then start new array of elements
arr.push(item);
}
else { //=If newNum is greater than the length of all the elements then wrap the remainder of elements in a column
arr.push(item);
var column = $(this).pushStack(arr);
column.wrapAll('<div class="' + wrapClass + '"/>');
arr = []
}
});
}
}
});
Я взял идею плагина Кайла и расширил ее, чтобы автоматически обернуть и принять два аргумента. Сначала это не сработало для меня, но я запустил его с несколькими изменениями и дополнениями к коду.
чтобы вызвать функцию, просто используйте родительский элемент того, что вы хотите обернуть, а затем задайте свои аргументы следующим образом.
$('#container').WrapThis(5, 'li');
первый аргумент - сколько элементов вы хотите обернуть вместе, а второй аргумент-тип элемента, который вы хотели бы упаковка.
вы можете изменить класс элемента обертывания в главной функции под переменной wrapClass
.
Я подготовил этот ответ для другого вопроса, который был дубликатом этого. Так что, может быть, мой вариант будет полезен для кого-то:
Я думаю, что решение обернуть все три элемента:
var $lines = $('.w-col'), // All Dom elelements with class .w-col
holder = []; //Collect DOM elelements
$lines.each(function (i, item) {
holder.push(item);
if (holder.length === 3) {
$(holder).wrapAll('<div class="w-row" />');
holder.length = 0;
}
});
$(holder).wrapAll('<div class="w-row" />'); //Wrap last elements with div(class=w-row)
Я написал тот же код в jsbin с некоторыми улучшениями http://jsbin.com/necozu/17/ или http://jsbin.com/necozu/16/