Перестройка HTML с JavaScript

Question

У меня есть регулярный неупорядоченный список ссылок, которые я хотел бы изменить с помощью 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, если это имеет значение.

Answer 1

DEMO

$('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

• .wrapAll()
• .unwrap()
• .contents()
• .replaceWith()
• .slice()
• .length
• this keyword
• .innerHTML

Answer 2

Вы можете использовать что-то вроде этого:

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/

Answer 3

Вы можете использовать этот код:

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/