jquery - 访问点击处理程序的孩子

Question

假设我有一些看起来像这样的 HTML：

<div id="TheTable">
    <div class="TheRow">
        <div class="Col Col1">col1</div>
        <div class="Col Col2">col2</div>
        <div class="Col Col3">col3</div>    
    </div>
</div>

我正在为行绑定点击处理程序，如下所示：

$(document).ready(function () {

    $('#TheTable').on({
        click: function () { alert('clicked on row'); }
    }, '.TheRow');

});

如您所见，单击行中的任何单元格都会触发单击功能。

我想改变它，这样当点击发生时，我可以获得Col实际点击的元素的索引或类。因此，例如，如果舔发生在一个.Col2元素上，我想获取索引（即 1）或类（即。Col Col2）。

我该怎么做呢？

jsFiddle 在这里。

Answer 1

2个选项：

$('#TheTable').on({
    click: function (e) {
        var target_index = $(e.target).index();
        alert('clicked on row ' + target_index);
    }
}, '.TheRow');

这将为您提供示例的 0,1 或 2 的索引。

演示在这里

---

您可以使用它来获取类（尊重第二类始终处于“第二”位置）：

$('#TheTable').on({
    click: function (e) {
        var classes = $(e.target).prop('class').split(' ')[1];
        alert('clicked on row ' + classes);
    }
}, '.TheRow');

演示在这里

Answer 2

$('#TheTable').on({
    click: function (e) { alert($(e.target).index()); }
}, '.TheRow');

更新了小提琴。

Answer 3

用于e.target获取目标元素..attr('class')或prop()获取相应的类

尝试这个

$(document).ready(function () {

$('#TheTable').on({
    click: function (e) {

        alert($(e.target).attr('class'));
    }
}, '.TheRow');

});

在这里摆弄

Answer 4

您将需要使用 jQuery 的index()功能。它获取容器内的元素编号

$(document).ready(function () {
    $('#TheTable').on("click", function () {
        var number = $(".TheRow").index() + 1; // get element number and add 1
        alert('clicked on row ' + number);
    });
});

小提琴

Answer 5

我会选择这样的代码：

$(document).ready(function () {

    $('.Col').on('click',function () 
        { alert('clicked on row');
         alert($(this).attr('class'));
        });    
});

Answer 6

这样做以获得类和索引：

$(文档).ready(函数 () {

$('#TheTable .TheRow div').on('click',function () {
    var i = $('#TheTable .TheRow div').index(this);
    var c = $(this).attr('class');
    alert("index: "+i+",Class: "+c);
});  

});