jQuery選擇：選擇一個類的某些組合時，多個存在

我試圖做一些研究已經並沒有發現任何東西，但如果我錯過了答案，請告訴我。基本上我有多個類，每個類都有多個類，但是組合是唯一的。我想選擇某種類別的組合，但不包含其他元素與其他元素結合使用。jQuery選擇：選擇一個類的某些組合時，多個存在

我想知道，如果在jQuery的存在，或者這個選擇，如果有一些其他的方式來完成我所解釋。看下面的例子：

<div class="a b c"></div> 
<div class="a b c d"></div> 
<div class="a b c d">/div>

當試圖用類a b c只記錄的元素，我嘗試使用：

$('.a.b.c').each(function() { 
    console.log($(this)); 
}

輸出爲：

[ <div class="a b c">...</div> , 
<div class="a b c d">...</div , 
<div class="a b c d">...</div> ]

我要找輸出爲：

[ <div class="a b c">...</div> ]

任何指導表示讚賞。謝謝！

來源

2015-02-07 Wold

你可以使用CSS3 :not() pseudo class否定.d類：(example)

$('.a.b.c:not(.d)').each(function() { 
    console.log($(this)); 
});

jQuery的也有.not() method：(example)

$('.a.b.c').not('.d').each(function() { 
    console.log($(this)); 
});

您也可以使用屬性選擇器：(example)

[class="a b c"]

注意，爲了始終是a b c。只是把它放在那裏作爲一個選項。

來源

2015-02-07 00:48:15

我不相信你可以直CSS選擇這樣做，短期使用：不一一列舉要排除所有其他類或與一些實操[CLASS =]。不過，你可以做的是選擇具有類名爲.abc的所有元素，然後篩選出在其類列表超過三個元素的任何元素：

var $abcDivs = $('.a.b.c').filter(function(i, $elem){ 
    return $elem.attr("class").split(' ').length == 3; 
})

更普遍：

function exactClass(classList) { 
    return $(classList.join('.')).filter(function(i, $elem){ 
    return $elem.attr("class").split(' ').length == classList.length; 
    }); 
}

來源

2015-02-07 00:57:10 rmehlinger

感謝您的回答，但另一個適合我的需求更多。 – Wold 2015-02-07 01:02:44

當然可以！我的意圖是用於你不知道其他類可能是什麼的情況;如果你確切地知道他們是什麼，那麼第一個更好。 – rmehlinger 2015-02-07 01:06:24

我一直在尋找類似的東西前一段時間，但我沒能猜到我不需要什麼類（如它們是動態附加）。因此，而不是排除與not()不需要的類，我做了這個以配合只有我知道的類元素。

var classes = ['a','c','b']; 
 

 
$('.'+classes.join('.')).each(function(){ 
 
    var cl = $(this).attr('class'); 
 
    for(var i in classes) { 
 
    cl = cl.split(classes[i]).join(''); 
 
    } 
 
    if(cl.replace(/\s+/, '') === ''){ 
 
    $(this).addClass('blah'); 
 
    } 
 
});

.blah{ 
 
    font-size:30px; 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="a b c d">Foo</div> 
 
<div class="c b a">Bar</div> 
 
<div class=" a b c">Hello</div> 
 
<div class=" a b">World</div>

JSFiddle。作爲一種方法：

function el(c){ 
    var a = []; 
    $('.'+c.join('.')).each(function(){ 
     var k = $(this).attr('class'); 
     for(var i in c) k=k.split(c[i]).join(''); 
     if(k.replace(/\s+/,'')==='') a.push(this); 
    }); 
    return a; 
} 

// usage: 
$(el(['a','c','b'])).addClass('blah');

來源

2015-02-07 02:08:07

jQuery選擇：選擇一個類的某些組合時，多個存在

回答

相關問題