javascript - 获取不同元素的索引

Question

我想获取具有单击锚点 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(/^.*#/, "#"));
})

Answer 2

您错误地指定了 ID 属性。

从属性中丢失哈希符号id，但不是从属性中丢失href。然后您的第二次尝试将起作用。

Answer 3

稍微整理了一下：

$(function() {
    $('li a').on('click', function() {
        var target = $(this).attr('href');
        $('.foo ' + target).html('hello');
    });
});

我将事件处理程序直接a放在li. 我还使用on()了 1.7 中引入的 jQuery 方法，这是事件处理程序的首选方法。

然后：

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

要获取单击项目的索引：

$('.foo ' + target).index();

jsFiddle 示例：http: //jsfiddle.net/DNfYg/