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中放了两个div，而在每个dl中都有一些dt。

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

所以我写道：

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

但它总是给出索引1。

感谢您的回答。

Answer 1

你需要这样做：

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

选中此fiddle

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

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

检查this fiddle

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 Fiddle demo

根据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 Fiddle demo

参考文献：

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

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

5 个答案: