Question

下面是我的ul列表。

<ul id="sortingCols">

 <li> <a href="#" class="floatright asc"><span>delete</span></a>
 <a href="#"    class="floatright desc"><span>delete</span></a>List item 1</li>

<li><a href="#" class="floatright asc"><span>delete</span></a>
<a href="#" class="floatright    desc"><span>delete</span></a>List item 1</li>

<li><a href="#" class="floatright asc"><span>delete</span></a>
<a href="#" class="floatright  desc"><span>delete</span></a>List item 1</li>

</ul>

我想仅在li个元素中获取li元素的索引我试过这个：

liIndex = jQuery('#sortingCols a').next().index();

但我得到li中所有元素中ul个元素的索引，包括a个标记。

我该怎么办？

Answer 1

点击href

$('a.desc').click(function(){
        liIndex = jQuery(this).index('#sortingCols a.desc');
        alert(liIndex);
    });

$('a.asc').click(function(){
        liIndex = jQuery(this).index('#sortingCols a.asc');
        alert(liIndex);
    });

更新1

$('a').click(function(){
        liIndex = jQuery(this).parent().index('#sortingCols li');
        alert(liIndex);
    });

js fiddle

Answer 2

我猜你想要点击或其他一些事件：

$('#sortingCols li').on('click', function() {
    var siblings = $(this).prevAll('li');

    console.log(siblings.length);
});

Answer 3

您的HTML无效，应该是：

<ul id="sortingCols">
  <li>
    List item 1
    <a href="#" class="floatright asc"><span>delete</span></a>
    <a href="#" class="floatright desc"><span>delete</span></a>
  </li>
  <li>
    List item 2
    <a href="#" class="floatright asc"><span>delete</span></a>
    <a href="#" class="floatright desc"><span>delete</span></a>
  </li>
  <li>
    List item 3
    <a href="#" class="floatright asc"><span>delete</span></a>
    <a href="#" class="floatright desc"><span>delete</span></a>
  </li>
</ul>

你的JS代码也需要（假设你有其他代码使用它，例如.each（）：

liIndex = jQuery('#sortingCols li').index();

.next（）将返回下一个<li>元素的索引。

Answer 4

你可以使用这样的东西。

liIndex = jQuery('#sortingCols a').find('li').index();

你也可以尝试第二个。

var allLIElements = jQuery('#sortingCols a').find('li');
liIndex = allLIElements.index(jQuery('#sortingCols a').next());

获取由其他html标记组成的ul中的li元素的索引

4 个答案: