У меня есть обычный неупорядоченный список ссылок, который я хотел бы изменить с помощью js
<ul>
<li><a href="#">Theme 1</a></li>
<li><a href="#">Theme 2</a></li>
<li><a href="#">Theme 3</a></li>
<li><a href="#">Theme 4</a></li>
<li><a href="#">Theme 5</a></li>
<li><a href="#">Theme 6</a></li>
<li><a href="#">Theme 7</a></li>
<li><a href="#">Theme 8</a></li>
<li><a href="#">Theme 9</a></li>
<li><a href="#">Theme 10</a></li>
<li><a href="#">Theme 11</a></li>
<li><a href="#">Theme 12</a></li>
</ul>
Я хотел бы получить следующий результат:
<div class="themes__row">
<div class="themes__item><a href="#">Theme 1</a></div>
<div class="themes__item><a href="#">Theme 2</a></div>
<div class="themes__item><a href="#">Theme 3</a></div>
<div class="themes__item><a href="#">Theme 4</a></div>
</div>
<div class="themes__row">
<div class="themes__item><a href="#">Theme 5</a></div>
<div class="themes__item><a href="#">Theme 6</a></div>
<div class="themes__item><a href="#">Theme 7</a></div>
<div class="themes__item><a href="#">Theme 8</a></div>
</div>
<div class="themes__row">
<div class="themes__item><a href="#">Theme 9</a></div>
<div class="themes__item><a href="#">Theme 10</a></div>
<div class="themes__item><a href="#">Theme 11</a></div>
<div class="themes__item><a href="#">Theme 12</a></div>
</div>
Я пробовал несколько разных решений взад и вперед, но это заканчивается тем, что действительно беспорядочно, поэтому у меня действительно нет кода для показа. Как это делается умным способом? На этом сайте используется jQuery 1.4.4, если это имеет значение.
$('ul').each(function () {
var lis = $('li', this);
for (var i = 0; i < lis.length; i += 4) {
lis.slice(i, i + 4).wrapAll('<div class="themes__row"></div>');
}
$('.themes__row li').replaceWith(function () {
return '<div class="themes__item">' + this.innerHTML + '</div>';
});
}).contents().unwrap('ul');
Reftrences
Вы можете использовать этот код:
var target = $('ul');
var elems = target.children('li').contents(); //get li contents
for (var i = 0; i < elems.length; i++) {
var elem = document.createElement('div');
elem.className = 'themes__item';
elem.appendChild(elems[i]); //wrap contents in divs
//append divs to rows
if (i % 4 == 0) { //if elem index is multiple of 4
//create a new row and add elem
$('<div class="themes__row">').insertBefore(target).append(elem);
} else {
target.prev().append(elem); //else append elem to existing row
}
}
target.remove(); // remove ul
Смотрите это прямо здесь http://jsfiddle.net/valentin/u6LkM/3/
Вы можете использовать что-то вроде этого:
var items = $("ul li a");
var parent = items.eq(0).closest("ul"), cntr = 0;
for (var i = 0; i < items.length / 4; i++) {
var container = $('<div class="themes__row"></div>');
for (var j = 0; j < 4; j++) {
$('<div class="themes__item"><a href="#">' + items.eq(cntr++).html() + '</a></div>').appendTo(container);
}
$(document.body).append(container);
}
parent.remove();
Рабочая демонстрация: http://jsfiddle.net/jfriend00/7zWt9/
wrapAll
? api.jquery.com/wrapAll