V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xiaozy
V2EX  ›  问与答

JQUERY 如何遍历多个相同 DIV

  •  
  •   xiaozy · 2017-09-01 10:19:29 +08:00 · 3691 次点击
    这是一个创建于 2400 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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显示当前点击的是第几个,比如点击内容 1content就显示1,点击内容 2就显示2以此类推。。。因为以上内容是列表并固定形式输出,所以不知道该怎么遍历...求解,先谢谢啦!~

    11 条回复    2017-09-01 14:16:47 +08:00
    Pan940425
        1
    Pan940425  
       2017-09-01 10:27:05 +08:00
    div 上加上 id 不就好了。。。
    xiaozy
        2
    xiaozy  
    OP
       2017-09-01 10:40:07 +08:00
    @Pan940425 感谢回复,结构是列表输出生成并且固定,没法加啊。
    Hozart
        3
    Hozart  
       2017-09-01 10:45:23 +08:00
    @xiaozy 可以遍历所有的目标 div 并加上升序 ID
    ferrum
        4
    ferrum  
       2017-09-01 10:46:44 +08:00
    不太明白你在问什么,你用$('.list')获取的数组就是有序的,$('.list').eq(0)就是 HTML 中的第一个 div.list 元素。
    domty
        5
    domty  
       2017-09-01 10:52:58 +08:00   ❤️ 1
    你可以直接绑定所有 class = content 的方法的点击触发方法啊;

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

    或者$(".list").foreach(function(){...});来遍历所有 class = list 的 div。
    sundev
        6
    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
        7
    Pan940425  
       2017-09-01 11:14:08 +08:00   ❤️ 1
    $(".content").each(function(i) {
    $(this).on("click", function() {
    let j = i + 1;
    alert(j);
    })
    })

    你要的是这个?
    littleylv
        8
    littleylv  
       2017-09-01 11:16:10 +08:00   ❤️ 1
    $(".content").click(function(){
    console.log($(this).parent().parent().index() + 1);
    });
    iiduce
        9
    iiduce  
       2017-09-01 11:17:04 +08:00   ❤️ 1
    $('div.list div.content').each(function(i){
    $(this).click(function(){
    alert(i+1);
    })
    })
    SakuraKuma
        10
    SakuraKuma  
       2017-09-01 11:23:09 +08:00   ❤️ 1
    为何不用 parents('.list').index。 方便快捷
    davin
        11
    davin  
       2017-09-01 14:16:47 +08:00
    也能用 closest('.list').index
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1006 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:49 · PVG 03:49 · LAX 12:49 · JFK 15:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.