0

我想通过链接名称中显示的索引选择 a 内的标签 onlu。这样做的最佳方法是什么？

<div class="index-get">
    <div class="column">
        <a href="#">Category Title</a>
        <ul>
            <li><a href="#">Index 0</a></li>
            <li><a href="#">Index 1</a></li>
            <li><a href="#">Index 2</a></li>
            <li><a href="#">Index 3</a></li>
            <li><a href="#">Index 4</a></li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li><a href="#">Index 5</a></li>
            <li><a href="#">Index 6</a></li>
            <li><a href="#">Index 7</a></li>
            <li><a href="#">Index 8</a></li>
            <li><a href="#">Index 9</a></li>
        </ul>
    </div>
</div>

$('.index-get ul a').click(function(){

    var aIndex = $(this).index();
    console.log(aIndex);

});
4

4 回答 4

1 
 var aIndex = $('.index-get li a').index($(this));

$('.index-get li a')你应该在事件处理程序之外缓存

var $lia = $('.index-get li a');

$lia.on('click',function() {

       console.log($lia.index($(this)));

    })
于 2013-10-08T09:54:03.907 回答
0

不确定问题是否足够清楚，但这里可能与您需要的内容有关：

$('.index-get ul a').click(function(){
    var aIndex = $(this).text();
    console.log(aIndex);
});

还有小提琴。

编辑

我想我终于明白了这个问题，叹息...... :-) 由于每个父 LI 内只有一个 A，因此在您的示例中，A 标签的索引将始终为 0，因为该索引与 sieblings 相关......

如果你计算 LI 的指数，你可能会得到更好的结果。但请记住，索引仅计入每个父级，因此对于两个 UL，您将获得两组 LI 子级，因此单击索引 1 或索引 6 将产生相同的结果。

新小提琴

再编辑一次

实际上 UL 也不是 sieblings，必须先进入 DIV，然后再进入 UL，才能计算先前项目的 LI……但我想它非常适合您的需求。我了解您的需求是... ;-)

$('.index-get ul li').click(function(){
    var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length;
    console.log(aIndex);
});

还有小提琴。

最后编辑 使线条稍微简单一些

var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;

  • &(this) 是一个 LI 元素。

  • $(this).parent() 是 UL

  • $(this).parent().parent() 是 DIV

  • $(this).parent().parent().prev() 是该 DIV 的所有兄弟元素（希望那里只有 DIV 并且都具有相同类型的内容）

  • $(this).parent().parent().prev().find("ul li") 同级 DIV 中 UL 内的所有 LI。

  • $(this).parent().parent().prev().find("ul li").length; 上一行中的 LI 的数量。

你去吧。简单的逻辑！;-)

当你认为一切都已完成并安顿下来时......还有一个编辑！:-)

我正在考虑我提出的解决方案，如果您有两个以上的 UL 组并且如果您单击位于第三个 UL 或更高版本中的 LI，它最终会失败。

因此，我创建了另一个解决方案，它使用 .prevAll() 而不仅仅是 .prev() 但必须使用 .each() 和一个函数来将来自先前 UL 的所有 LI 元素的所有计数相加。

小提琴

现在我可以安心睡觉了！:-)

法布里西奥

于 2013-10-08T09:52:09.327 回答
0

试试这个代码：

$('.index-get ul a').click(function(){
    var aIndex = $(this).text().match(/\d+$/)[0];
    console.log(aIndex);
});
于 2013-10-08T10:09:52.247 回答
0

无论 li 的嵌套有多深，这都应该有效：

var items = $('li');

items.on('click', function() {
  var clicked_item = $(this);
  
  items.each(function(index){
    if ($(this).is(clicked_item)){
      console.log(index);
    } 
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="index-get">
    <div class="column">
        <a href="#">Category Title</a>
        <ul>
            <li><a href="#">Index 0</a></li>
            <li><a href="#">Index 1</a></li>
            <li><a href="#">Index 2</a></li>
            <li><a href="#">Index 3</a></li>
            <li><a href="#">Index 4</a></li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li><a href="#">Index 5</a></li>
            <li><a href="#">Index 6</a></li>
            <li><a href="#">Index 7</a></li>
            <li><a href="#">Index 8</a></li>
            <li><a href="#">Index 9</a></li>
        </ul>
    </div>
</div>

于 2016-08-24T01:07:07.843 回答