javascript - 获取不同元素的索引

Question

我想获取带有点击 anchor id 的 div 的索引:

<ul>
    <li><a href="#div1">Div 1</a></li>
    <li><a href="#div2">Div 2</a></li>
    <li><a href="#div3">Div 3</a></li>
</ul>
<div class="foo">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

所以，如果我点击 Div 1，我想获取 .foo #div1 索引，但我自己做不到。

我试过:

$('ul li a').click(function() {
    var target = $(this).attr('href');

    // $(target).index();
    // $('.foo').index(target);
})

谢谢 =)

Answer 1

你可以在 .foo 中得到对应的 div，其索引与点击的相同:

$('ul a').click(function() {
    // get the index of the item that was clicked
    var index = $(this).closest("li").index();
    // find that same index in .foo
    var target = $(".foo > div").eq(index);
})

或者，如果你想使用 href，你可以这样做:

$('ul a').click(function() {
    // use getAttribute so we don't get a fully qualified URL
    var target = $(this.getAttribute("href"));
})

或者，另一种使用完全限定 URL 的方法:

$('ul a').click(function() {
    var target = $(this.href.replace(/^.*#/, "#"));
})