Jquery: select all elements except one with specific child with specific attribute

Question

Assuming I have something like this:

<div class="testdiv">
    <a href="/link1">link 1</a>
</div>
<div class="testdiv">
    <a href="/link2">link 2</a>
</div>
<div class="testdiv">
    <a href="/link3">link 3</a>
</div>
<div class="testdiv">
    <a href="/link4">link 4</a>
</div>

Now I want select all <div>s of class testdiv except the div that has a child <a> with attribute href="/link3", how to do that with jQuery?

I know I can do this:

$('div.testdiv')

gdoron · Accepted Answer · 2012-05-19T23:14:37.797

7

With :not + :has it can be done easily with one selector:

$('div.testdiv:not(:has(a[href="/link3"]))')

If you don't quote the value in the attribute ("CSS identifiers") you need to escape the slash(/) with two backslashes (\\):

$('div.testdiv:not(:has(a[href=\\/link3]))')

Live DEMO

If There can be only one anchor in a div, you can use this:

$('div.testdiv:has(a[href!="\\/link3")')

edited May 19 '12 at 23:14

answered May 19 '12 at 22:08

gdoron

147,333
58
291
367

I like how you wrote your script, but still it selects all the divs without the exception – evilReiko May 19 '12 at 22:36
@evilReiko. Sorry there was `]` missing... I fixed it and added a demo – gdoron May 19 '12 at 22:44
You don't need to escape `/` if you're quoting the attribute. – BoltClock May 19 '12 at 22:49
@BoltClock. Two reasons **1.** `If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\.` **2.** It doesn't work without it... `:)` – gdoron May 19 '12 at 22:52
1

Pretty sure you only have to do that when you're not quoting the attribute value. – BoltClock May 19 '12 at 22:52
@BoltClock. You're right, if I use quotes it's not have to be used. I'm going to keep it as it doesn't hurt anything, and because this is no docs they says it's valid without escaping it. – gdoron May 19 '12 at 22:54
@gdoron What if the link is a variable? `var link = '/link3'; $('div.testdiv:has(a[href!="\\' + link + '")');` So should I use double slashes or without? It seems like it works even without them! – evilReiko May 19 '12 at 22:57
1

@evilReiko. I wouldn't use them if it's a variable, I would add them to the variable value. anyway, as boltclock mentioned, it works without them as well as long as you use quotes. I would keep them anyway. – gdoron May 19 '12 at 22:59
@BoltClock. Can you reference me to the docs about the quotes? – gdoron May 19 '12 at 23:00
2

The [CSS spec](http://www.w3.org/TR/selectors/#attribute-selectors) mentions the difference between strings (quoted) and identifiers (unquoted). It seems jQuery follows the same set of rules since allowing unquoted attribute selectors. – BoltClock May 19 '12 at 23:03
@BoltClock. Thanks, I really appreciate it. I edited the answer with that useful info. **thanks** – gdoron May 19 '12 at 23:15
@BoltClock. As a mod, answers like _"Ali Tarhini"_ below, should be flagged and deleted or not? In general, answers that are clearly wrong should be flagged? What's benefit of keeping tem live? (I would flag it, but from my experience those flags are declined, suggesting to downvote, but I did that part already... :) ) – gdoron May 19 '12 at 23:50
@gdoron: Answers that are clearly wrong should **not** be flagged. A wrong answer is still an answer - it's not for a mod to delete. You can always downvote the answer if you think it's wrong. – BoltClock May 20 '12 at 00:46
@BoltClock. I wish SO will invent a garbage collection for those kind of "answers", they are nothing but noise. – gdoron May 20 '12 at 00:48

score 1 · Answer 2 · edited May 20 '12 at 09:16

1

You can use filter for this:

var elements = $('.testdiv').filter(function(){
    return !$(this).find('a[href=\\/link3]').length;
});

edited May 20 '12 at 09:16

gdoron

147,333
58
291
367

answered May 19 '12 at 22:06

Will Vousden

32,488
9
84
95

You need to escape the `/` with `\\\` – gdoron May 19 '12 at 22:11
Thanks for the answer, but still selects all divs without exception! – evilReiko May 19 '12 at 22:37
@evilReiko. Yes, that is because the first argument of `filter` is the index, not the element... see [this demo](http://jsfiddle.net/pF5y8/1/) for how to use `filter`. $Will, fix it and I'll upvote it. – gdoron May 19 '12 at 22:49
@gdoron: My bad; I'm not with it today. – Will Vousden May 20 '12 at 09:15
Allow me to improve it a bit. – gdoron May 20 '12 at 09:16
@gdoron: Well that's purely stylistic; I prefer to be explicit/type-strict in my boolean checks and parameter declarations. – Will Vousden May 20 '12 at 09:19
Then why didn't you decalred the second parameter(the element...) you can rollback if you like to. – gdoron May 20 '12 at 09:20

score -2 · Answer 3 · answered May 19 '12 at 22:03

-2

$('div.testdiv a[href^=/link3').parents();

answered May 19 '12 at 22:03

Ali Tarhini

5,278
6
41
66

This will select the `a` elements, not the `div`s. – Will Vousden May 19 '12 at 22:07
And `parents` will select all the parents of the (undesired) div up to the ``.... – gdoron May 19 '12 at 22:19

Jquery: select all elements except one with specific child with specific attribute

3 Answers3

Linked