Question

假设我有这个

<ul class='list'>
  <li>item0</li>
  <li class='active'>item1</li>
  <li>item2</li>
  <li class='active'>item3</li>
  <li class='active'>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class='list'>
  <li class='active'>item0</li>
  <li>item1</li>
  <li class='active'>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li class='active'>item5</li>
  <li class='active'>item6</li>
</ul>

我试图显示他们当前的索引（134,0256），但显示（0123456）。我尝试了一些代码，但它只显示所选的索引。

我该怎么做？

感谢。

示例代码

$(document).ready(function(){
        $('button').click(function(){
            $( "ul.list li.active" ).each(function(index) {
                console.log(index);
            });
        });
    });

Answer 1

callback中的第一个参数是jQuery对象集合中的索引。要获得相对于其兄弟姐妹的索引，请使用index()方法。

$(document).ready(function() {
  $('button').click(function() {
    $("ul.list li.active").each(function(index) {
      console.log($(this).index()); // get index within its parent
    });
  });
});

$("ul.list li.active").each(function(index) {
  console.log($(this).index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list'>
  <li>item0</li>
  <li class='active'>item1</li>
  <li>item2</li>
  <li class='active'>item3</li>
  <li class='active'>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class='list'>
  <li class='active'>item0</li>
  <li>item1</li>
  <li class='active'>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li class='active'>item5</li>
  <li class='active'>item6</li>
</ul>

为了使用逗号分隔每个列表，请使用列表的附加迭代器，使用jQuery map()方法很容易。

console.log(
  $("ul.list").map(function() { // iterate over each list
    return $("li.active", this).map(function() { // iterate over children li
      return $(this).index(); // return the index
    }).get().join(''); // get the result as array and join the values
  }).get().join() // get the result as array and join the values with comma
)

console.log(
  $("ul.list").map(function() {
    return $("li.active", this).map(function() {
      return $(this).index();
    }).get().join('');
  }).get().join()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list'>
  <li>item0</li>
  <li class='active'>item1</li>
  <li>item2</li>
  <li class='active'>item3</li>
  <li class='active'>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class='list'>
  <li class='active'>item0</li>
  <li>item1</li>
  <li class='active'>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li class='active'>item5</li>
  <li class='active'>item6</li>
</ul>

Answer 2

您的选择将找到所有选择的元素。相反，你想分别在其他元素中找到元素。我认为只有通过搜索才能实现。所以你的代码看起来应该是

$(document).ready(function() {
    $('button').click(function(){
        var indexes = [];
        $( "ul.list").each(function() {
            $("li", this).each(function(index) {
                 if($(this).hasClass('active') {
                     indexes.push(index);
                 }
            });
        });
        console.log(indexes);
    });
});

获取具有相同类的元素的索引

2 个答案: