javascript - 如何获取使用 jQuery 单击的 dt 的索引？

Question

我的 HTML 看起来像：

<div id="aGroupOfLists">
    <dl id="list0">
        <dt> header0 </dt> 
        <dd> item0 in list0 </dd> 
        <dd> item1 in list0 </dd> 
        <dd> item2 in list0 </dd> 
    </dl>
    <dl id="list1">
        <dt> header1 </dt> 
        <dd> item0 in list1 </dd> 
        <dd> item1 in list1 </dd> 
    </dl>
</div>

请注意，我dl在 a 中放了两个 s，div每个dl中都有几个dts。

我想知道dt用户点击了哪个，通过使用 jQuery。

所以我写道：

$('#list0').click(function() {
    var index = $("#list0").index(this);
    alert(index);
});

但它总是给出索引1。

谢谢你的回答。

Answer 1

你需要做：

$('#list0 dt').click(function() {
    var index = $(this).index();
    alert(index);
});

检查这个小提琴

或者，如果您想访问两个dl节点的索引，

$('#aGroupOfLists dl dt').click(function() {
    var index = $(this).index();
    alert(index);
});

检查这个小提琴

Answer 2

我个人建议：

$('#aGroupOfLists').on('click', 'dl dt', function(e){
    // logs the index of the clicked 'dt' element amongst its siblings:
    console.log($(e.target).index());

    // logs the index of the clicked 'dt' from amongst all 'dt' elements:
    console.log($(e.target).index(e.target.tagName));
});

JS 小提琴演示。

根据来自 OP 的问题（和下面的评论）中新增的信息，现在很明显我们正在尝试获取dd元素的索引以及其中的文本，所以：

$('#aGroupOfLists').on('click', 'dl dd', function(e){
    /* logs the index of the clicked 'dd' element amongst its siblings
       (which includes the 'dt' elements): */
    console.log($(e.target).index());

    // logs the index of the clicked 'dd' from amongst all 'dd' elements:
    console.log($(e.target).index(e.target.tagName));

    console.log('Text: ' + $el.text());
});

JS 小提琴演示。

参考：

• event.target.
• on().
• text().

Answer 3

为什么不只是...

$('dt').click(function(){
var index = $(this).index();
alert(index); // or just do whatever you want with index
}

Answer 4

试试这个

$('dl dt').click(function() {
    alert("DT Index: "+$(this).index());
});

小提琴 http://fiddle.jshell.net/4Crwj/

Answer 5

如果要单击 DT，则必须将其包含在选择器中：

$('#list0 dt').click(function() {
    var index = $("#list0").index(this);
    alert(index);
});