Question

我有一组具有相同类别的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。我做错了什么？

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: