0

繰り返しの HTML 構造から3 つの既存の要素のうち 2 つを選択しようとしていますがa、効率的な jquery セレクターの設計に問題があります。

これがマークアップです。を選択しようとしていますLink 1が、選択できLink 2ませんLink 3。HTML 構造全体 ( div.container) が複数回出現する可能性があることに注意してください。containerそうであれば、すべてのクラスのリンク 1 とリンク 2 が必要です。

注 1: マークアップを変更できません。

注2：ソリューションは完全にセレクターベースにすることをお勧めします（.find()このセレクターは、この質問の範囲外の別のセレクターと組み合わせる必要があるため、などの呼び出しを避けます。

<div class="container">
    <h1>
        <a href="http://www.google.ca">Link 1</a>
    </h1>
    <div>
        <div class="left">
            <p>
                <a href="http://www.google.ca">Link 2</a>
            </p>
        </div>
        <div class="right">
            <a href="http://www.google.ca">Link 3</a>
        </div>
    </div>
</div>

単一のcontainer構造が発生する場合、単純なセレクターは次のとおりです。

$(".container a:lt(2)");

ただし、複数のcontainer構造が存在する場合、上記は最初のコンテナーからリンク 1 とリンク 2 のみを選択します。

以下は 1 つ以上のcontainer構造に対して機能しますが、私は気に入りません。複数の CSS パス セレクターを設定するのは効率が悪いようです。

$(".container h1 a, .container .left a");

詳細な言語では、「クラス内に含まれていないaクラス内のすべてのタグを選択したいと思います。これは可能ですか?または、2 つの CSS パスを使用する上記のセレクターが最適なオプションです。containerright

フィドルをテストします。

4

2 に答える 2

3

以下のようにしてみてください、

$(".container").find("a:lt(2)")

デモ

この質問の範囲外に別のセレクターがあり、それがこの質問のセレクターと組み合わされます。$('.myOtherSelector, .selectorFromThisQuestion'); としましょう。したがって、このソリューションはセレクターのみにすることをお勧めします。それ以外の場合は、 $('.container').find('a:lt(2)').add('.myOtherSelector') を実行してそれらを結合できますが、ご覧のとおり、最初のオプションの方がはるかに簡単です。それができない場合は、私が言ったように、私は間違いなくあなたのソリューション/マークを答えとして使用します. ストレートセレクターが使用できるかどうかだけに興味があります。

別の回避策として、1 行で表示したい場合は、以下のように試すことができます。これは、提示されたマークアップに対してのみ機能することに注意してください。マークアップを変更すると、コードが壊れます。

$(".container :nth-child(1) a").css('background-color','red');

デモ

于 2012-05-29T14:49:14.730 に答える
2

:not以下のようにセレクターを使用します。

$(".container a:not('.right a')")
于 2012-05-29T15:47:51.547 に答える