JQUERY 如何遍历多个相同 DIV

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2659 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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 条回复 • 2017-09-01 14:16:47 +08:00

Pan940425

2017-09-01 10:27:05 +08:00

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

xiaozy

2017-09-01 10:40:07 +08:00

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

Hozart

2017-09-01 10:45:23 +08:00

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

ferrum

2017-09-01 10:46:44 +08:00

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

domty

2017-09-01 10:52:58 +08:00

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

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

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

sundev

2017-09-01 11:09:41 +08:00

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

Pan940425

2017-09-01 11:14:08 +08:00

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

你要的是这个？