0

これに対するエレガントな解決策を見つけるのに本当に苦労しています。jQuery には、セレクター内に「&」または「:and」演算子が含まれていないことに驚きました。

タグフィルタリングメカニズムを構築しています。選択したタグに基づいて結果セットを削減したいと考えています。そこで、タグ クエリを渡し、セレクタに一致するセクションに子タグを持つ要素のみを表示したいと考えています。

問題:
一致するすべての子セレクターがある場合にのみ、div を返す必要があります。このコードは、tag_query 内の各セレクターの結合結果を示しています。すべてのセレクターに一致するノードのみが必要です。以下のコードは、(AND ではなく) .blue OR .green OR .button の子を持つすべての div を返します。

var tag_query = ".green, .blue, .button";
nodes_to_show = $(".results .element .tags").children(tag_query);
console.log(nodes_to_show);

UI 側で現在何が起こっているか: 1 つのタグ '.green' を選択すると、それらのタグを持つ要素のみが表示されます。次に、'.blue' タグを追加すると、'.blue' のタグを持つ要素も取得されるため、より大きなセットが表示されます (小さいセットが表示されることを期待しています)。「.blue」タグと「.green」タグの両方を持つ要素のみが表示されることを期待しています。

これはタグ構造です:

<div class="element">
    <div class="tags">
        <span class="item green">green</span>
        <span class="item button">button</span>
        <span class="item blue">blue</span>
    </div>
</div>

<div class="element">
    <div class="tags">
        <span class="item red">green</span>
        <span class="item button">button</span>
        <span class="item fire">blue</span>
    </div>
</div>

<div class="element">
    <div class="tags">
        <span class="item fire">fire</span>
        <span class="item button">button</span>
    </div>
</div>

「.button」タグを照会すると、上記の 3 つの「要素」div がすべて返されます。「.fire」および「.button」を照会すると、最後の 2 つの「要素」div が返されます。

何かご意見は？

4

1 に答える 1

2

ここ：

var arr = tag_query.split( ', ' );

$( '.element' ).filter(function () {
    var root = this;
    return arr.every(function ( className ) {
        return $( root ).find( className ).length > 0;
    });
}).show();

ライブデモ: http://jsfiddle.net/DjS2u/1/

したがって、.element要素ごとに、提供されたクラス名ごとに少なくとも 1 つの子孫が含まれているかどうかをテストします。文字列を配列に変換しtag_queryます。文字列形式はあまり役に立ちません。この場合、配列で配列メソッドを呼び出すことができevery()ます。

代替ソリューション:

var arr = tag_query.split( ', ' );

$( '.element' ).filter(function () {
    var $desc = $( this ).find( '*' );
    return arr.every(function ( className ) {
        return $desc.is( className );
    });
}).show();

ライブデモ: http://jsfiddle.net/DjS2u/2/

于 2012-06-25T19:51:04.957 に答える