4

私が取り組んでいるプロジェクトでは、小さな JavaScript オブジェクトを作成しています。その動作の 1 つは、一連のクラスの子を削除することです。

function Foo () {
    var $a = $('.a'),
        $b = $('.b'),
        // ...etc...
        $n = $('.n');

    $a.remove();
    $b.remove();
    // ...etc again...
    $n.remove();
}

これをより簡単に保守できるように修正する方法はいくつかありますが (セレクターを単一の配列に配置することがすぐに思い浮かびます)、.remove()一連のセレクターで操作を実行するエレガントな方法があるかどうか疑問に思っています。

function FooPrime() {
    var selectors = [
        '.a',
        '.b',
        // ...
        '.n'
    ];

    // Perform remove on all given selectors?
    $(selectors).remove();
}

したがって、質問: 多数のセレクターに対して単一の jQuery 操作を実行するには、どのような方法がありますか?

EDIT :これは、問題のコンテキストのカットダウン バージョンを表示する JSFiddle です。

4

2 に答える 2

6

セレクターはカンマで区切ることができます:

 $(selectors.join(',')).remove();

コンマには、通常の CSS セレクター構文でその目的があります。

于 2013-08-16T19:52:00.143 に答える
1

DOM を表示していただきありがとうございます。要素に複数のクラスを追加し、対象とする要素の特定のクラスを作成したり、他の要素への関連付けを介して対象にしたりできる場合は、クラスの大きなリストを作成して選択することは避けてください。これは、よりクリーンで効率的な方法です。

協会別

基本的にセレクターの場合、私はこれを持っています:

$("#test-callout").find("div").not(".callout-main").remove();

フィドル

これは、他に div がなく.callout-main、対象の div が にあることを前提としていますtest-callout。その場合は、セレクター チェーンを少し変更して補正することができます。

別のクラスを追加することで

矢印作成コードは次のようになりました。

function calculateArrow() {
    var arrowClass;
    if(pub.isLeft) {
        arrowClass = 'callout-arrow-left';   
    } else {
        arrowClass = 'callout-arrow-right';
    }

    pub.$callout.append('<div class="' + arrowClass + '"></div>');
}

次のように変更します。

function calculateArrow() {
    $arrow = $("<div>")
    .addClass("callout-arrow")
    .addClass(pub.isLeft ? "callout-arrow-left" : "callout-arrow-right");        
    pub.$callout.append($arrow);
}

次に、セレクターを次のように単純化できます。

$("#test-callout").find(".callout-arrow").remove();

フィドル

完全なリファクタリングに興味がある場合は、CalloutObject を 53 行から 17 行に減らしましたが、同じように機能します。

フィドル

于 2013-08-16T21:20:13.753 に答える