Оберните каждые 3 дива в div
можно использовать nth-child
селекторы для обертывания 3 дивов с помощью .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. так что помните, использовать селектор вызовов
EveryWhat(3)
и номер для каждого времени. Конечно, положить его в нижней части страницы или обернуть его в$(document).ready(function() { //place above code here });
вы могли бы использовать каждый N-й, а затем
.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/