如何將jQuery選擇器：not（）選擇器與getElementsByClassName一起使用

Question

我正在嘗試選擇並單擊類“ .foo”中不包含類“ .bar”的元素。

我想使用這樣的代碼，但是它不起作用：

var inputs = document.getElementsByClassName('foo:not(bar)'); 
for(var i=0; i<inputs.length;i++) { 
    inputs[i].click(); 
}

感謝幫助！

Answer 1

您可以嘗試使用querySelectorAll ：

var inputs = document.querySelectorAll('.foo:not(.bar)'); 

或在標簽中包含jquery時：

$('.foo:not(.bar)').each( function() {
    $( this ).click();
});

Answer 2

您可以使用.filter()函數首先選擇所有不帶bar的foo ：

的jsfiddle

CSS

.foo, .bar{
    padding:20px;
    font-weight:bold;
}

jQuery的

// get all foos and begine filtering
$('.foo').filter(function(){

    // show what class each div has
    $(this).text($(this).attr('class'));

    // translates into: IF bar not exist then return this element
    return !$(this).hasClass('bar');

// color the divs yellow
}).css('background-color','yellow');

HTML

<div class='foo'></div>
<div class='foo bar'></div>
<div class='foo bar'></div>
<div class='foo'></div>
<div class='foo'></div>
<div class='foo bar'></div>
<div class='foo'></div>
<div class='foo bar'></div>