CODEWITHSUNDEEP
jqueryjquery-selectors
user863739
user863739

Reputation: 299

jQuery - trouble with not() selector

Within 'div.row:visible' I want to fadeOut all children() which don't have the class span.sandwich:visible, although I'm having trouble figuring it out.

here's what I have so far

$('div.row:visible').children('span.sandwich:visible').not('.sandwich:visible').fadeOut('200');

which doesn't seem to work, could anyone help me out here

html

<div class='row'>
    <span class='sandwich'>sandwich</span>
</div>
<div class='row'>
    <span class='not-sandwich'>not sandwich</span>
</div>

Upvotes: 1

Views: 82

Answers (3)

Terry
Terry

Reputation: 14219

Just for clarification:

which don't have the class span.sandwich:visible

span.sandwich:visible is not a class.

sandwich is a class.

span.sandwich is any span element with a sandwich class.

span.sandwich:visible is any span element with a sandwich class that is visible.

So trying to interpret your question, I get:

Within 'div.row:visible' ...

Within visible div elements with the class row...

I want to fadeOut all children() which don't have the class span.sandwich:visible

You want to fadeOut() all notvisible span elements with the class sandwich, which are children of the div.row.

To me, that translates to

$('div.row:visible').children('span.sandwich:not(:visible)').fadeOut('200');

Given your HTML you just added:

$('span').not('.sandwich').fadeOut(200);

Will fade out entire span:

<span class='not-sandwich'>not sandwich</span>

$('span').not('.sandwich').parent().fadeOut(200);

Will fade out entire div:

<div class='row'>
    <span class='not-sandwich'>not sandwich</span>
</div>

FINAL EDIT BASED ON COMMENTS

http://jsfiddle.net/DDmsh/4/

and if you want to specify only div.row parents: http://jsfiddle.net/DDmsh/5/

Upvotes: 0

Aaron
Aaron

Reputation: 5227

I've run into trouble before daisy-chaining jQuery selection methods, and I was able to get around these issues by nesting selectors, as below:

$($($('div.row:visible').children('span.sandwich:visible')).not('.sandwich:visible')).fadeOut('200');

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

It's possibly getting confused with the selector within children, have you tried something like the following, which should select all of the children and then narrow that selection:

$('div.row:visible').children().not('.sandwich:visible').fadeOut('200');

Upvotes: 1

Related Questions