在多個選擇器上執行相同的操作，優雅？

在項目我的工作，我一直在寫一些JavaScript對象。它的一個行爲涉及一系列的類刪除任何孩子，因爲這樣：在多個選擇器上執行相同的操作，優雅？

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操作選擇器的數量？

編輯：here是一個JSFiddle來顯示問題上下文的精簡版本。

來源

2013-08-16 Andrew Gray

我很好奇在你這樣做的背景下，是有可能，你希望刪除這些內容應該分享類？請記住，元素可以有多個類。 – smerny

有什麼辦法可以更新你的HTML來擁有一個共同的類嗎？與其試圖一個接一個地選擇它們，你可以用這個普通的類來挑選它們。 –

在這種情況下，無法壓縮任何這種情況，因爲每個類具有不同的頂部，左側和邊框屬性。上下文是一個系統，它在將新尾標附加到標註之前從標註中刪除尾部。 –

感謝您展示DOM，你應該避免的類大名單，選擇的時候可以添加多個類元素，創造你想要的目標元素...或目標通過協會與其他元素的特定類。這將是一個更乾淨和有效的方式來做到這一點。

通過協會

基本上是選擇我只有這個：

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

Fiddle

這裏假設你沒有任何其他分區的除了.callout-main和目標股利在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();

Fiddle

如果你有興趣在一個完整的重構 - 我從53至17線降低您的CalloutObject，它仍然有效相同。

Fiddle

來源

2013-08-16 21:20:13 smerny

您可以用逗號分隔的選擇：

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

逗號在直線普通的CSS選擇器語法的目的所在。

來源

2013-08-16 19:52:00 Pointy

在多個選擇器上執行相同的操作，優雅？

回答

相關問題