用jQuery获取dt的数量

Question

<dl>
<dt>1</dt>
<dd></dd>
<dt>2</dt>
<dd></dd>
<dt>3</dt>
<dd></dd>
<dt>4</dt>
<dd></dd>
<dt>5</dt>
<dd></dd>
</dl>

当用户点击它时，如何获取dt元素的索引？第五个dt应该给4，第一个0。

$('dt').click(function(){
var index = 'how to?';
alert('current dt index is ' + index);
});

Answer 1

你可以这样做：

$('dt').click(function(){
   var index = $(this).prevAll('dt').length;
   alert('current dt index is ' + index);
});

在这里摆弄：http://jsfiddle.net/nicolapeluchetti/erUPs/

编辑 - 如果你只需要在下一个dd中添加一个类，你可以这样做：

$('dt').click(function(){
    $(this).next('dd').addClass('myclass')

});

在这里摆弄：http://jsfiddle.net/nicolapeluchetti/erUPs/2/

Answer 2

$('dt').bind('click', function () {
    var index = $(this).parent().children('dt').index(this);
});

请参阅接受选择器的children()方法和index()方法。

修改

使用addClass()方法为点击的dt添加课程：

$('dt').bind('click', function () {
    var self = $(this);
    var index = self.parent().children('dt').index(this);

    self.addClass("foo-" + index);
});    

我已将$(this)分配给self，以阻止$(this)计算不必要的次数。