如何通过类名获取被点击元素的索引？

Question

如何通过类名获取被点击元素的索引？

3

我想要获取被点击元素在其列表中以及其 .blue 类中的索引。

我已经弄清楚如何获取其列表中的索引，但无法弄清楚如何获取其 .blue 类中的索引。例如，当我点击第五个按钮时，希望显示“index 4 - class index 3”。

有什么想法吗？

$('.showindex').click(function() {
  var index = $(this).closest("li").index();
  console.log("index " + index + " - class index " + "?");
});

.blue {
  color: blue;
}

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<ol id="ol1">
  <li><input type="button" value="Show index" class="showindex blue">showindex blue</li>
  <li><input type="button" value="Show index" class="showindex">showindex</li>
  <li><input type="button" value="Show index" class="showindex blue">showindex blue</li>
  <li><input type="button" value="Show index" class="showindex">showindex</li>
  <li><input type="button" value="Show index" class="showindex blue">showindex blue</li>
</ol>

- user14214236

我猜你已经知道如何按顺序找到所有带有“blue”类的元素了吧？如果你没有一百万个元素，那就没问题。 - user202729

1

你可以像这样向 index() 方法传递参数：var blueIndex = $('.blue').index($(this));。请注意，如果找不到任何内容，它将返回 -1。 - Reyno

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

为了达到这个目的，您可以选择所有.blue元素，并将当前元素作为参数提供，以便在该集合中查找其索引。

请注意，由于在JS中索引是从零开始计数的，因此最后一个按钮将显示其“class index”为2。试试这个：

let $blues = $('li:has(.showindex.blue)');

$('.showindex').click(function() {
  let $li = $(this).closest('li');
  let index = $li.index();
  let classIndex = $blues.index($li);
  
  console.log(`index ${index}, class index ${classIndex}`);
});

.blue {
  color: blue;
}

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<ol id="ol1">
  <li><input type="button" value="Show index" class="showindex blue">showindex blue</li>
  <li><input type="button" value="Show index" class="showindex">showindex</li>
  <li><input type="button" value="Show index" class="showindex blue">showindex blue</li>
  <li><input type="button" value="Show index" class="showindex">showindex</li>
  <li><input type="button" value="Show index" class="showindex blue">showindex blue/li>
</ol>