JQUERY如何遍历多个相同DIV

Question

<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如何知道点击的是第几个以及点击的content内容是什么?谢谢！~

Answer 1

HTML:

<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>
<div id='run'>结果</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

JS：

$(document).on('click', '.content', function(){
    var $this = $(this),
        index = $this.parents('.list').index(),
        cont  = $this.text();
    $('#run').text('index: ' + index + ' content: ' + cont);
});

Answer 2

假设每个.class元素都绑定了单击事件,并且事件的执行函数实现如下

    $(".content").click(function(){
        
        var $this = $(this); //当前点击的元素，所对应的Jq对象
        
        //当前点击元素，在所有同类型（都使用了.content类）元素中位置
        var index = $(".content").index($this);
        
        //当前元素中的内容
        var real_content = $this.html();
              
    })
    

上述代码没有亲测过，但基本思路是这样的；

也可以 自行了解下 Jq的 index() 函数

---

不使用Jq的情况

    
    var contentElements = document.getElementByClassName("content");
    
    //遍历每个元素，并绑定事件
    for(var i=0;i<contentElements.length;i++){
            contentElements[i].onclick=function (){
                whenClick(contentElements[i]);
            }
        }
    
    //事件逻辑
    function whenClick(obj){
        var contentElements = document.getElementByClassName("content");
        
        for(var i=0;i<contentElements.length;i++){
            if(contentElements[i]==obj){
                console.log("index is "+ i);
                console.log("html is " + obj.innerHTML);
            }
        }
    }

Answer 3

应该可以用class来选择吧

Answer 4

和楼上差不多，就是把事件代理放在的body上。

$('body').on('click', '.content', fn);

function fn() {
    let _this = $(this);
    console.log($('.content').index(_this), _this.text());
}

Answer 5

这篇文章也许可以帮助到你 http://www.bcptdtptp2019.top/...