Question

我正在尝试拆分几个具有相同类“dropdown_4columns”的ul。我想在名为“column”的div中包装每个第15个li项。我使用的脚本实际上是从下一个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>");
  }
});

Answer 1

尝试这样：

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

是的，如果你想要所有，那么就这样：

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

Answer 2

你需要循环遍历UL，然后然后循环通过LI：

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

（未经测试，仅用于概念）

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

拆分具有相同类的无序列表

5 个答案: