jQuery：如何在类组中找到类的编号位置答案

【问题标题】：jQuery: How to find numbered position of class within group of classesjQuery：如何在类组中找到类的编号位置
【发布时间】：2017-05-19 05:46:26
【问题描述】：

我有一组具有相同类的img 元素。

<!--div of img elements-->
<div id="container">
    <img class="square" src="one.jpg"/>
    <img class="square" src="two.jpg"/>
    <img class="square" src="three.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="five.jpg"/>
</div>

当点击这些img 元素之一时，我想以img 的编号位置登录控制台。例如，如果单击<img class="square" src="two.jpg"/>，我希望控制台记录2，因为该元素是带有class="square" 的第二个元素。

我的尝试

参考this previous Stack Overflow question，这是我迄今为止在我的代码中尝试使用的内容：

<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

    //click an image with class="square"
    $(".square").click(function() {
    //find position of clicked image within classes "square"
    console.log( $(this).index('#container') + 1);

</script>

控制台中的结果始终为0。我做错了什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

删除“#container”，它将为您提供容器中元素的索引。

来自 jQuery API 文档：

如果没有参数传递给 .index() 方法，则返回值为一个整数，指示第一个元素在相对于其兄弟元素的 jQuery 对象。

$(".square").click(function() {
    //find position of clicked image within classes "square"
    console.log( $(this).index() + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <img class="square" src="one.jpg"/>
    <img class="square" src="two.jpg"/>
    <img class="square" src="three.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="five.jpg"/>
</div>

【讨论】：

做到了。谢谢。

【解决方案2】：

$(".square").bind("click", function(){
    var imgs = $(".square");
    var curIdx = imgs.index($(this)); 
    alert(curIdx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div id="container">
    <img class="square" src="one.jpg"/>
    <img class="square" src="two.jpg"/>
    <img class="square" src="three.jpg"/>
    <img class="square" src="four.jpg"/>
    <img class="square" src="five.jpg"/>
</div>

【讨论】：