如何使用jquery获取元素的索引?

I have three div containers.

我有三个div容器。

<div class="box"></div>
<div class="box">
    <span class="item">my item</span>
</div>
<div class="box"></div>

There's an item in one of the containers. How do I detect which container it is, i.e. first, second or third?

其中一个容器里有一个东西。我如何检测它是哪个容器，即第一，第二还是第三?

5 个解决方案

#1

There's no need for a loop here, you can simply get the index() of the .box that contains the .item by selecting it directly:

这里不需要循环，只需直接选择包含.item的.box的index()即可:

var index = $('.box .item').closest('.box').index('.box');
console.log(index);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box">
  <span class="item">my item</span>
</div>
<div class="box"></div>

#2

You can achieve this with an each loop and then you look up if the item element has a bigger length than 0. Please note that the counter starts at 0.

您可以通过一个循环来实现这个目标，然后您可以查看项目元素的长度是否大于0。请注意计数器从0开始。

I made you an example which alerts the index of the element that contains something. If you want to start counting at 1 just write index+1 within the alert.

我给您做了一个示例，它会提醒包含某些内容的元素的索引。如果你想从1开始计数，只需在警报中写入index+1。

$(".box").each(function(index){
    if($(this).children(".item").length > 0){
      alert(index);
    }
});

https://jsfiddle.net/m1voxk6e/

#3

Try this :

试试这个:

$(".box").each(function(index,ele){

    if($(this).children().length > 0)

        alert("Div Number "  + (index + 1) + " have Item(s)");

})

Final code :

最后的代码:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <body>
        
        <div class="box">

        </div>
        <div class="box">
            <span class="item">my item</span>
        </div>
        <div class="box">

        </div>
 
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        
        <script>
            
        $(".box").each(function(index,ele){

            if($(this).children().length > 0)

                alert("Div Number "  + (index + 1) + " have Item(s)");

        })

 
        </script>
    </body>
</html>

#4

You can use :has() or .has() to selecting .box element contain .item.

您可以使用:has()或.has()来选择.box元素包含.item。

$(".box:has(.item)").index(".box");
// Or
$(".box").has(".item").index(".box");

var index = $(".box:has(.item)").index(".box");
console.log(index);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box">
    <span class="item">my item</span>
</div>
<div class="box"></div>

#5

you could use the length property of the object

可以使用对象的长度属性。

Ex:

例:

$(document).ready(function(){
    var obj=$(".box").children('.item');
    if(obj.length>0){
        //do something with the object
        alert(obj.parent().html());
        alert(obj.parent().index());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">

</div>
<div class="box">
    <span class="item">my item</span>
</div>
<div class="box">

</div>

#1