Question

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

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

});

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

    })

Answer 2

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

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

fiddle。

修改

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

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

New Fiddle

再修改一次

实际上UL既不是siebling也不是siebling，必须先进入DIV并再次进入UL以便能够计算之前项目的LI ...但我认为它的效果非常适合您的需求。我明白你的需求是......; - ）

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

fiddle。

上次修改 使线条更简单

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

＆amp;（this）是一个LI元素。

$（this）.parent（）是UL

$（this）.parent（）。parent（）是DIV

$（this）.parent（）。parent（）。prev（）是该DIV的所有兄弟元素（希望只有DIV在那里，并且所有内容都具有相同类型的内容）
< / LI>

$（this）.parent（）。parent（）。prev（）。find（“ul li”）所有LI在兄弟DIV中的内部。

$（this）.parent（）。parent（）。prev（）。find（“ul li”）。length;上一行中的LI数。

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

当你认为一切都已完成并解决了......还有一个编辑！： - ）

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

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

Fiddle

现在我可以平安地睡觉了！： - ）

法布里西奥

Answer 3

试试这段代码：

$('.index-get ul a').click(function(){
    var aIndex = $(this).text().match(/\d+$/)[0];
    console.log(aIndex);
});

Answer 4

无论李的嵌套深度如何，这都应该有效：

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>

选择深层嵌套元素的.index（）

4 个答案: