如何按順序選擇多個類別的元素

我想按照的順序選擇所有具有兩個類別a和b的元素。如何按順序選擇多個類別的元素

<element class="a b">

當我使用$（「。a + .b」）時，我得到兩個類都以任何順序排列的元素。我只需要class =「a b」和而不是 class =「b a」的那些元素。當我使用javascript的getElementsByClassName時，我遇到了同樣的問題。

注意：我必須指定順序的原因是我的文檔中的某些div有class =「a b」，有些有「b a」。。。我只想選擇帶有「a b」的那些。文檔結構不夠優雅，但這不在我的掌控之中。

來源

2016-11-12 peacecoder

這些類的順序不影響jQ據我所知，uery選擇器。 – Alvaro

爲什麼訂單首先重要？ – charlietfl

我不知道你在努力達到什麼，但有可能有很多更好的方法來實現它。根據類別的*順序*沒有用處，也不常見，並且總體上沒有意義。你的目標是什麼？也許我們可以更好地幫助你。 –

如果這些元素沒有其他類，你可以通過屬性選擇它們

$('[class="a b"]')

還有屬性 - 開始 - 與和-ends-與選擇，以及屬性包含選擇，這將拿起元素，即使他們確實有更多的類

$('[class*="a b"]')

注：這也符合...class="what a bad idea"

平原JS支持querySelector[All]

的屬性選擇但這是一個壞主意，它不應該不管什麼順序類的，如果確實如此，你做錯了什麼。

來源

2016-11-12 19:45:18 adeneo

一個屬性列表理想情況下不應該優先於另一個值;換句話說，命令應該是不重要的，所以你可能在這裏有一個可疑的模型。

但是，要回答你的問題，你需要類似正則表達式的東西。

$('*').filter(function() { return /\ba\b.*\bb\b/.test(this.className); });

[編輯]

這是更寬容，如果有A和B之間的其他類的任何機會。正如Adaneo的答案所顯示的那樣，如果你確定只有那兩個，你可以使用屬性選擇器，就像他演示的那樣。

來源

2016-11-12 19:46:50 Utkanos

如果其他類也參與其中，你可以使用filter()

$(".a.b").filter(function(){ 
    return this.className.indexOf('a b')>-1; 
})

來源

2016-11-12 19:48:01 charlietfl

在這裏你可以看到的jsfiddle：https://jsfiddle.net/d002g7n8/1/

$('.a.b') 

    .filter(function(){ 

     return this.classList[0] == 'a' && this.classList[1] == 'b'; 

    }) 
    .addClass('selection');

我們首先選擇的元素，然後篩選那些有類「一'排在第一位，班'b'排在第二位。

來源

2016-11-12 19:54:11 Alvaro

這會起作用，但是不必要的併發症，不應該練習。 –

謝謝@BrandtSolovij。你能解釋一下爲什麼這是不必要的併發症嗎？如果我們在變量中已經存在$（'。a.b'）（用於其他目的），以這種方式過濾它不是一個好主意嗎？ – Alvaro

「班級選擇」與「班級順序」的混合正在做不必要的工作，這也是不可靠的。不應該依賴表示類的順序，因爲類可以在視圖上下文的生命週期中的任何點添加/刪除/讀取。具體的意圖應該依賴不變的概念，比如「事物的存在」或者不存在。取決於試圖實現的目標 - 對data []或aria []使用css選擇器也會對DOM的整體安定更有利， –

選擇器$（「。a +。B「）是第二個元素與b類等DOM：

<element class="a"> 
<element class="b">

或本：

<element class="a b"> 
<element class="a b">

關於選擇+：http://www.w3schools.com/cssreF/sel_element_pluss.asp

對於你的問題，你可以使用這個選擇與過濾器：

$('.a.b').filter(function() { 
    return $(this).attr('class') == 'a b'; 
})

來源

2016-11-12 19:54:28 mospans

如何按順序選擇多個類別的元素

回答

相關問題