동일한 클래스의 정렬되지 않은 목록

Question

동일한 클래스 인 "dropdown_4columns"가있는 몇 개의 ul을 분할하려고합니다. 나는 "열"이라는 div에 매 15 번째 li 항목을 감싸고 싶다. 내가 사용하는 스크립트는 실제로 그렇게하지만 다음 ul dropdown_4columns에서 li 항목을 가져옵니다. 그럼 어떻게 그냥 현재 목록에 대한 리튬 항목을 나눌 수 있습니다. 나는 css3 열을 사용할 수 없으며 클래스 나 ID를 변경할 수 없습니다. 그것은 모두 자동으로 생성됩니다! 내가 찾아 가장 가까운 사용하려하고 $이 있지만, 운이 :(

<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"); 

예, 당신이 모두를 원하는 경우, 다음과 같이하십시오 :

$("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>');