列表中有多少个元素，元素的索引已单击

Question

考虑以下标记

<ul id="thumbs">
    <li><a href=""><img class="thumb" src=""></a></li>
    <li><a href=""><img class="thumb" src=""></a></li>
    <li><a href=""><img class="thumb" src=""></a></li>
</ul>

当我单击带有“拇指”类的img时，我需要以下内容：

ul列表中有多少个列表项
单击的img所属的列表项的索引

$('img.thumb').click(function(e) {
    // how many elements in the list 'thumbs'

    // the index of the <li> where the img clicked belong to
});

Answer 1

您可以使用length来获取列表项的总数，以及使用.closest（）和.index（）来获取所单击图像的最接近祖先li的索引：

$('img.thumb').click(function(e) {
    // how many elements in the list 'thumbs'
    var length = $('#thumbs li').length;

    // the index of the <li> where the img clicked belong to
    var index = $(this).closest('li').index();
});

小提琴演示

Answer 2

尝试

$('img.thumb').click(function(e) {
  $("#thumbs li").length;
  $(this).closest("li").index();
});

您可以使用closest("li")或parents("li")来获取parent li目的。 您可以使用index()方法找到索引。 和length()获取计数

Answer 3

尝试这个：

  $('img.thumb').click(function(e) {
   // how many elements in the list 'thumbs'
     alert($('#thumbs li').length);
   // the index of the <li> where the img clicked belong to
     alert($(this).closest('li').index());
});