获取不同元素的索引

Get index of different element

本文关键字：索引 元素 获取      更新时间：2023-09-26

我想获取 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);
})

谢谢=）

您可以在 .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(/^.*#/, "#"));
})

您未正确指定 ID 属性。

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

清理了一下：

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

我将事件处理程序直接放在li内的a上。我还使用了 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/

相关文章：