Question

我有多个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>

...如果只有一个列表，则成功;当有其他列表时，最后一列类（'column-3'）将添加到页面上的所有剩余列表项。换句话说，脚本目前正在连续索引所有后续列表/列表项，而不是为每个有序列表重新设置为[0]。

有人可以告诉我正确的方法/语法来纠正/修改这个，以便脚本重新对每个有序列表进行寻址/索引吗？

提前多多感谢。

shecky

P.S。标记是非常直接的：

<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" -->

Answer 1

这将迭代每个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').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 

});

Answer 2

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

使用'.each'方法：如何从[0]开始获取多个有序列表的索引？

2 个答案: