1

リンクをクリックすると<section>、ID 属性を持つ次のリンクを見つけて、その ID を返す必要があります。

したがって、次のマークアップと JavaScript を考えると、リンクをクリックして「section_3」をコンソールに書き込むことが期待できます。

<section id="section_1">
    <a href="#" class="findNext">Find</a>
</section>
<section></section>
<section id="section_3"></section>
<section id="section_4"></section>

と

$('a.findNext').click(function() {
    var nextSectionWithId = $(this).closest("section").next("section[id]");
    if (nextSectionWithId) {
        var sectionId = nextSectionWithId.attr('id');
        console.log(sectionId)
    }
});

しかし、これはうまくいきません。ここで jsFiddle にコードを設定しました。

これが機能しない理由はありますか？

4

2 に答える 2

5

試す ：

var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");

また

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');

フィドル

next は次の要素でのみ一致を検索するため、next は使用できません。そのため、代わりに、セレクターでnextAllを:firstと組み合わせて使用​​できます。

アップデート

jquery でfirst()メソッドを使用して、コレクションの最初の要素をフェッチすることもできます。これは、より高速なオプションのようです。

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();

おそらく次の理由が考えられます。

:first は jQuery の拡張機能であり、CSS 仕様の一部ではないため、:first を使用するクエリは、ネイティブ DOM の querySelectorAll() メソッドによって提供されるパフォーマンスの向上を利用できません。:first を使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋な CSS セレクターを使用して要素を選択し、次に .filter(":first") を使用します。

@TJクラウダー礼儀

于 2013-10-24T14:46:51.023 に答える
3

.nextAll()を使用する

デモ

var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;

デモ

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');

デモ

var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');
于 2013-10-24T14:46:53.213 に答える