0

我正在尝试拆分一些具有相同类“dropdown_4columns”的ul。我想将每 15 个 li 项目包装在一个名为“column”的 div 中。我使用的脚本实际上是这样做的，但会从下一个 ul dropdown_4columns 中获取 li 项目。那么我怎样才能只为当前列表拆分 li 项目。我不能使用 css3 列，也不能更改类或 id。都是自动生成的！我尝试使用最接近的，find 和 $this 但没有任何运气:(

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

5 回答 5

1

You need to loop through the ULs and then loop through the LIs:

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

(untested, just for concept)

于 2013-08-21T14:41:16.797 回答
1

试试这样：

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

是的，如果你想要全部，那么就像这样：

$("ul.dropdown_4columns").each(function(){
   $(this).find("li")...
});
于 2013-08-21T14:37:09.967 回答
1

好的，这是您要查找的代码：

$(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-21T14:46:14.883 回答
1

你可以这样做：

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

现场演示

于 2013-08-21T14:45:46.060 回答
1

整洁而简单......就像一个魅力。

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-21T14:49:10.083 回答