Question

我有三个div容器。

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

其中一个容器中有一个项目。如何检测它是哪个容器，即第一个，第二个还是第三个？

Answer 1

你可以通过每个循环实现这一点，然后查看item元素的长度是否大于0.请注意，计数器从0开始。

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

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

https://jsfiddle.net/m1voxk6e/

Answer 2

此处不需要循环，您可以直接选择包含index()的{{1}}的{{1}}：

＆＃13;

.box

＆＃13;

.item

＆＃13;

Answer 3

试试这个：

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

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

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

})

最终代码：

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

Answer 4

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

例如：

＆＃13;

$(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());
    }
});

＆＃13;

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

＆＃13;

Answer 5

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jquery获取元素的索引具有特定的子元素？

5 个答案: