2

クリックされたアンカーの 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);
})

ありがとう =)

4

3 に答える 3

4

これでクリックしたものと同じインデックスを持つ .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(/^.*#/, "#"));
})
于 2012-08-19T02:42:12.563 に答える
0

ID 属性が正しく指定されていません。

id属性からではなく、属性からハッシュ記号を失いhrefます。その後、2回目の試行が機能します。

于 2012-08-19T02:40:51.973 に答える
0

少しクリーンアップ：

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

于 2012-08-19T02:45:10.637 に答える