JQUERY 如何遍历多个相同 DIV

This topic created in 3218 days ago, the information mentioned may be changed or developed.

<div class="list">
    <div class="box">
        <div class="header">头部 1</div>
        <div class="content">内容 1</div>
    </div>
</div>
<div class="list">
    <div class="box">
        <div class="header">头部 2</div>
        <div class="content">内容 2</div>
    </div>
</div>
<div class="list">
    <div class="box">
        <div class="header">头部 3</div>
        <div class="content">内容 3</div>
    </div>
</div>

代码如上，就是，点击content显示当前点击的是第几个，比如点击内容 1的content就显示1，点击内容 2就显示2以此类推。。。因为以上内容是列表并固定形式输出，所以不知道该怎么遍历...求解，先谢谢啦！~

11 replies • 2017-09-01 14:16:47 +08:00

Pan940425

Sep 1, 2017

div 上加上 id 不就好了。。。

xiaozy

Sep 1, 2017

@Pan940425 感谢回复，结构是列表输出生成并且固定，没法加啊。

Hozart

Sep 1, 2017

@xiaozy 可以遍历所有的目标 div 并加上升序 ID

bayallen

Sep 1, 2017

不太明白你在问什么，你用$('.list')获取的数组就是有序的，$('.list').eq(0)就是 HTML 中的第一个 div.list 元素。

domty

Sep 1, 2017

你可以直接绑定所有 class = content 的方法的点击触发方法啊；

$(".content").click(function(){
var text = $(this).html();//获取的是 content div 内的内容。
})

或者$(".list").foreach(function(){...});来遍历所有 class = list 的 div。

sundev

Sep 1, 2017

(function($contents){
$contents.on('click', function(event) {
$contents.each(function(i, item) {
if (event.target === item) {
console.log(i+1);
return false;
}
});
});
})($('.content'));

Pan940425

Sep 1, 2017

$(".content").each(function(i) {
$(this).on("click", function() {
let j = i + 1;
alert(j);
})
})

你要的是这个？