获取同类元素的索引答案

【问题标题】：Get the index of elements with same class获取同类元素的索引
【发布时间】：2018-08-28 19:19:47
【问题描述】：

假设我有这个

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

我正在尝试显示他们当前的索引 ex.(134,0256)，但它显示的是 (0123456)。我尝试了一些代码，但它只显示选定的索引。

我该怎么做？

谢谢。

示例代码

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

【问题讨论】：

标签： javascript jquery html indexing each

【解决方案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>

【讨论】：

所以是$this，先生，如何用逗号分隔ul？
@MarkGerrylMirandilla 因为你需要使用单独的迭代.....我将添加另一个答案

【解决方案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);
    });
});

【讨论】：

欢迎@MarkGerrylMirandilla！！