jquery - 列表中有多少个元素，点击的元素的索引

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>

当我点击带有“thumb”类的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();
});

<强> Fiddle Demo