CODEWITHSUNDEEP
javascriptjquerycssdomselector
Aloc1234
Aloc1234

Reputation: 165

Multiple not() DOM Selectors

I want to select a particular node with two not clauses, but I had no success so far. What I need to do is, select an element whose div contains the string 0008, but it's not 10008 and also it does not contain the tag "style", so, in theory it should work like that:

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

However, as you might suspect, it doesn't work that way.

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

Both of them work perfectly individually, of course.

Upvotes: 7

Views: 4003

Answers (3)

nbrooks
nbrooks

Reputation: 18233

jsFiddle Demo

Logically, you are trying to exclude elements that match either of the two undesired selectors, not elements that match them both. In jQuery, the multiple selector (which will then match all of the undesired elements, then be negated) is simply a comma-separated listing. Therefore you simply do this:

$("div[id*='0008']:not([id='10008'],[style])")

From the jQuery docs (since this question is tagged jQuery):

All selectors are accepted inside :not(), for example: :not(div a) and :not(div,a).

Upvotes: 2

adeneo
adeneo

Reputation: 318212

I'd just do:

var elems = $('div[id*="0008"]').filter(function() {
    return !this.hasAttribute("style") && this.id == '10008';
});

I don't think I really get this, but this would filter out:

<div id="10008" style="color: black">10008</div>

but not:

<div id="10008">10008</div>

ID's are of course unique, and there could be a real world use case for this, but it still seems like an edge case that you'd normally handle some other way, as once you'd filtered out the ID, why exactly do you need to match a style tag as well ?

Upvotes: 0

Bergi
Bergi

Reputation: 664548

not 10008 and also it does not …

That's not what your current selector checks, it test whether it has not ( the id and a style attribute ) . Use this instead:

div[id*='0008']:not([id='10008']):not([style])

Your original solution also was not a valid selector, since :not() may only contain one simple selector, while you had two of them. Yet, selector libraries like jQuery's sizzle engine might support them. So with jQuery, the following would work as well:

div[id*='0008']:not([id='10008'],[style])

Upvotes: 12

Related Questions