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
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
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/
https://jsfiddle.net/m1voxk6e/
#3
0
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
0
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
0
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
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
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/
https://jsfiddle.net/m1voxk6e/
#3
0
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
0
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
0
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>