Javascript 使用';。每个';方法:如何将多个有序列表的索引从[0]开始?

Javascript 使用';。每个';方法:如何将多个有序列表的索引从[0]开始?,javascript,jquery,Javascript,Jquery,我有多个div,每个div都有一个有序列表(不同长度)。我使用jquery根据索引向每个列表项添加一个类(用于对每个列表的部分进行列化)。到目前为止我所拥有的 <script type="text/javascript"> /* Objective: columnize list items from a single ul or ol in a pre-determined number of columns 1. get the index of each lis

我有多个div,每个div都有一个有序列表(不同长度)。我使用jquery根据索引向每个列表项添加一个类(用于对每个列表的部分进行列化)。到目前为止我所拥有的

<script type="text/javascript">

/*    Objective: columnize list items from a single ul or ol in a pre-determined number of columns
    1. get the index of each list item
    2. assign column class according to li's index
*/
$(document).ready(function() {

    $('ol li').each(function(index){
        // assign class according to li's index ... index = li number -1: 1-6 = 0-5; 7-12 = 6-11, etc.
        if ( index <= 5 )    {
            $(this).addClass('column-1');
            }
        if ( index > 5 && index < 12 )    {
            $(this).addClass('column-2');
            }
        if ( index > 11 )    {
            $(this).addClass('column-3');
            }

        // add another class to the first list item in each column
        $('ol li').filter(function(index) {
            return index != 0 && index % 6 == 0;
            }).addClass('reset');

    });    // closes li .each func
});    // closes doc.ready.func

</script>

/*目标:按预先确定的列数列出单个ul或ol中的列表项
1.获取每个列表项的索引
2.根据li的索引分配列类
*/
$(文档).ready(函数(){
$('ol li')。每个(函数(索引){
//根据李的索引分配班级…索引=李编号-1:1-6=0-5;7-12=6-11等。
如果(索引5和索引<12){
$(this.addClass('column-2');
}
如果(索引>11){
$(this.addClass('column-3');
}
//将另一个类添加到每列的第一个列表项中
$('ol li').filter(函数(索引){
返回索引!=0&&index%6==0;
}).addClass(“重置”);
});//关闭li。每个函数
});    // 关闭doc.ready.func
。。。如果只有一个列表,则成功;当存在其他列表时,最后一列类(“column-3”)将添加到页面上所有剩余的列表项中。换句话说,该脚本目前正在通过所有后续列表/列表项连续编制索引,而不是为每个有序列表重新设置为[0]

有人能告诉我正确的方法/语法来纠正/修正这一点,以便脚本地址/索引每个有序列表重新

非常感谢

谢基

p、 在美国,加价相当直接:

<div class="tertiary">
 <h1>header</h1>
 <ol>
  <li><a href="#" title="a link">a link</a></li>
  <li><a href="#" title="a link">a link</a></li>
  <li><a href="#" title="a link">a link</a></li>
 </ol>
</div><!-- END div class="tertiary" -->

标题

  • 这将在每个OL上迭代,但每次迭代一次:

    // loop over each <ol>
    $('ol').each(function(olIndex){
    
        // loop over each <li> within the given <ol> ("this")
        $(this).find('li').each(function(liIndex){
            // do your <li> thing here with `liIndex` as your counter
        });
    
    });
    
    $('ol')。每个(函数(){
    $(this).find('li').each(函数(索引){
    //根据李的索引分配班级…索引=李编号-1:1-6=0-5;7-12=6-11等。
    如果(索引5和索引<12){
    $(this.addClass('column-2');
    }
    如果(索引>11){
    $(this.addClass('column-3');
    }
    }).过滤器(功能(索引){
    返回索引!=0&&index%6==0;
    }).addClass('reset');//关闭li和筛选器
    }); // 关闭每个
    
    谢谢Michael!我通过添加('ol')得到了想要的结果。每个func。有了这样的成功,我可以继续进行你建议的改进了——我需要一分钟时间让那些人了解。。。干杯
    $('ol').each(function(){
    
      $(this).find('li')
    
         .filter(':lt(6)').addClass('column-1')            // <li> 1-5
           .filter(':first').addClass('reset').end().end() // <li> 1
         .filter(':gt(5):lt(12)').addClass('column-2')     // <li> 6-11
           .filter(':first').addClass('reset').end().end() // <li> 6
         .filter(':gt(11)').addClass('column-3')           // <li> 12+
           .filter(':first').addClass('reset');            // <li> 12
    
    });
    
    $('ol').each(function(){
    
      var $lis = $(this).find('li');
      var len = $lis.size();
      var colLen = Math.ceil(count / 3);
    
      // and so on with the filter stuff with 
    
    });
    
    $('ol').each(function(){
      $(this).find('li').each(function(index){
        // assign class according to li's index ... index = li number -1: 1-6 = 0-5; 7-12 = 6-11, etc.
        if ( index <= 5 )    {
            $(this).addClass('column-1');
            }
        if ( index > 5 && index < 12 )    {
            $(this).addClass('column-2');
            }
        if ( index > 11 )    {
            $(this).addClass('column-3');
            }
      }).filter(function(index) {
            return index != 0 && index % 6 == 0;
      }).addClass('reset'); // Closes li each and filter
    }); // closes ol each