0

同じクラス「dropdown_4columns」を持ついくつかのulを分割しようとしています。「列」と呼ばれるdivで15番目のliアイテムごとにラップしたい。私が使用するスクリプトは実際にそれを行いますが、次のul dropdown_4columnsからli項目を取得します. では、現在のリストだけの li アイテムを分割するにはどうすればよいでしょうか。css3 列を使用できず、クラスや ID を変更できません。それはすべて自動的に生成されます！私は最も近い、見つける、そして $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>

Jクエリ

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

すっきりとシンプル...魅力のように機能します。

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

jsフィドル

また

$('li:eq(14)').filter(function() {
    return $(this).parent().hasClass('dropdown_4columns');
}).wrapAll('<div class="column"></div>');
于 2013-08-21T14:49:10.083 に答える
1

このようにしてみてください：

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

はい、すべてが必要な場合は、次のようにします。

$("ul.dropdown_4columns").each(function(){
   $(this).find("li")...
});
于 2013-08-21T14:37:09.967 に答える
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

UL をループしてから、LIをループする必要があります。

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

（未テスト、概念のみ）

于 2013-08-21T14:41:16.797 に答える
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 に答える