javascript - 如何使用 jquery 在一组选定元素中获取元素的顺序？

Question

我需要在一组选定的元素中获取元素的顺序，例如：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li id="example">2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $('#example').click(function (e)) {
        $this = $(this);
        // some code
    });
</script>

我需要知道 $this 在所有 li 元素中的顺序。例如，在这种情况下，代码应返回 5。

我的第一个想法是遍历所有 li 元素并比较每个元素，但我认为这种方法很慢。我还可以为每个 li 元素添加一个 data-order 属性，但是还有其他更简单或更快的方法吗？

Answer 1

试试这个

 $('#example').click(function (e) {
  var $this = $(this);
  var $index = $('li').index($this);
   alert($index + 1) //+1 because index start from 0
 });

在这里摆弄

注意：这将选择<li>文档中的所有内容。具体来说，您可以给一个类/IDul并使用类/ID选择器$('.ulClass li').index($this);

Answer 2

但这将返回 4，因为计数从 0 开始。

 $('#example').on('click',function(e){
         $this = $(this);
        console.log($("li").index(this))
    });

http://jsfiddle.net/szGtd/

Answer 3

如果您的ul标签都包装在一个容器中，您可以执行以下操作：

var index = $('#container li').index($('#example')) + 1;

小提琴http://jsfiddle.net/DScxd/

Answer 4

尝试

$("#example").click(function () {
  var index = $('li').index(this);
  console.log(index + 1)
});

见http://jsfiddle.net/pAuMG/