Question

我想得到一个div的索引，其id为clicked anchor：

<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上。我还使用了1.7中引入的jQuery的on()方法，这是事件处理程序的首选方法。

然后：

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

获取不同元素的索引

3 个答案: