Question

我正在尝试选择并点击不包含“.bar”类的“.foo”类的元素。

我想使用这样的代码，但它不起作用：

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()功能首先选择没有foo的所有bar：

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>

如何将getElementsByClassName与jQuery选择器一起使用：not（）选择器

2 个答案: