разбить неупорядоченные списки с тем же классом

Question

Я пытаюсь разбить несколько ul, которые имеют один и тот же класс «dropdown_4columns». Я хочу обернуть каждый 15-й элемент li в div под названием «column». Используемый сценарий делает это на самом деле, но захватывает элементы li из следующих ul drop_4columns. Итак, как я могу просто разделить элементы li только для текущего списка. Я не могу использовать столбцы css3 и не могу изменять классы или идентификаторы. Все это генерируется автоматически! Я пытался использовать ближе, найти и $ это, но без удачи :(

<ul class="nav clearfix"> 
    <li class="item"> 
    <ul class="dropdown_4columns"> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
    <li class="item"> 
    <ul class="dropdown_4columns"> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
    <li class="item"> 
    <ul class="dropdown_4columns"> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </li> 
</ul> 

Jquery

$().ready(function(){ 

    var divs = $("ul.dropdown_4columns > li"); 
    for(var i = 0; i < divs.length; i+=15) { 
    divs.slice(i, i+15).wrapAll("<div class='column'></div>"); 
    } 
}); 

Answer 1

Вам необходимо пройти через в ULS и затем перебрать Lis:

$(".dropdown_4columns").each(function)) { 
    var divs = $(this).children("li"); 
    //split code here 
}); 

(тестировался, просто для концепции)

Answer 2

попробовать это так:

var divs = $("ul.dropdown_4columns").first().find("li"); 

Ye, если вы хотите, чтобы все, то вот так:

$("ul.dropdown_4columns").each(function(){ 
    $(this).find("li")... 
}); 

Answer 3

Вы можете сделать это:

$('.dropdown_4columns').each(function() { 

    // Check the number of lis in each div with class 'dropdown_4columns' 
    // This is for debug purpose only, you can remove it if you want.. 
    console.log('Length: ' + $(this).children('li').length); 

    // Get all the lis in each div with class 'dropdown_4columns' 
    var divs = $(this).children('li'); 

    // Use your code now 
    for (var i = 0; i < divs.length; i += 15) { 
     divs.slice(i, i + 15).wrapAll("<div class='column'></div>"); 
    } 
}); 

LIVE DEMO

Answer 4

хорошо вот код вы ищете:

$(document).ready(function(){ 
    $("ul.dropdown_4columns").each(function(){ 
     var fifteenthLi = $(this).children("li").eq(14); 
     fifteenthLi.replaceWith("<div class='column'>" + fifteenthLi[0].outerHTML + "</div>") 
    }); 
}); 

Answer 5

Утонченный и простой ... работает как очарование.

var items = $('.dropdown_4columns li'); 
$.each(items,function(i,v) { 
    if (i == 14) $(this).wrapAll('<div class="column"></div>'); 
}); 

jsFiddle

или

$('li:eq(14)').filter(function() { 
    return $(this).parent().hasClass('dropdown_4columns'); 
}).wrapAll('<div class="column"></div>');