拆分無序列表與相同的類

我想分裂幾個具有相同類「dropdown_4columns」的ul's。我想將每個第15個li項目都包裝在一個名爲「列」的div中。我使用的腳本實際上是從下一個ul dropdown_4columns獲取li項目。那麼，我怎麼才能將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>"); 
    } 
});

來源

2013-08-21 Meules

確定，首先，'$（）。就緒（函數（）{'應該是'$（文件）。就緒（函數（）{' – pythonian29033

@ pythonian29033：好吧你是對的，但這不是問題;） – Meules

@ pythonian29033它也可能是'$（function（）{...}）;';） –

你需要循環上行線路和然後遍歷LIS：

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

（未經測試，只是概念）

來源

2013-08-21 14:41:16 Richard

Thx，這個工程！ – Meules

嘗試這樣的：

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

葉，如果你希望所有，然後像這樣：

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

來源

2013-08-21 14:37:09 reyaner

這應該怎麼辦？ – j08691

不抓住同一班級的下一個ul ... – reyaner

@reyaner：啊，好吧，那就是訣竅！所以基本上選擇第一個可用？！我會接受這個正確的答案...... thx！ – Meules

你可以這樣做：

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

來源

2013-08-21 14:45:46

還好這裏的代碼您正在查找的：

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

來源

2013-08-21 14:46:14 pythonian29033

整潔而簡單......就像一個魅力。

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

來源

2013-08-21 14:49:10 DevlshOne

誠然，它確實像魅力一樣工作。但是問題是*「那麼我怎麼才能將li項目僅僅分配給當前列表」*。所以......給定列表中的每個第15項。（仍然爲乾淨的代碼+1） – Richard

拆分無序列表與相同的類

回答

相關問題