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是here。

Answer 1

2个选项：

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

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

演示 here

你可以使用它来获得类（尊重第二类总是在“第二”位置）：

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

演示 here

Answer 2

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

Updated fiddle.

Answer 3

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

试试这个

$(document).ready(function () {

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

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

});

fiddle here

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);
    });
});

Fiddle

Answer 5

我会选择这样的代码：

$(document).ready(function () {

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

Answer 6

执行此操作以获取类和索引：

$（document）.ready（function（）{

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

}）;

访问点击处理程序的子项

6 个答案:

2个选项：