jquery selecting a class nested within another class

Question

okay so I'm slowly learning jquery and need some help i've looked around and tried some things with no luck. anyways I have a html dom structure like this:

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> </div
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'> </div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div>
   </div>
</div>

what I'm trying to accomplish is when i click a button one of (1,2,3 all) my jquery show's only the respective class inside foo or in case of all all classes. example: I click button 1 the dom looks like this

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'> 
   </div>
</div>

now i've tried doing this with the following command's i've found from solution's to other similar post on SO with no luck: (I have the all case working but none of the individual cases)

 $("#foo").find(".1").fadeOut();
 $("#foo  .1").fadeOut();
 $("#foo > .1").fadeOut();
 $("#foo,  .1").fadeOut(); // this just fades out all of foo

so How do I do this properly? so that i get my desired result, or have I missed a major concept somewhere, and this is not possible?

Note on edit: i have edited to properly close the div ... this is something i accidently did as the example is much simplified from entire code

Do you have your code wrapped in document.ready? The first three peices of code should work. — Kevin Bowersox, May 06 '13 at 09:41
Possible duplicate: [jQuery class within class selector](http://stackoverflow.com/questions/3767512/jquery-class-within-class-selector) — Boaz, May 06 '13 at 09:43
@KevinBowersox will the document.ready affect anything if the page has completely loaded .. though no i do not — brendosthoughts, May 06 '13 at 09:47
@MohammadAdil will have a class name start with spec change this at all , or is that more of bad coding style — brendosthoughts, May 06 '13 at 09:49
@Boaz I reffered to the 'possible duplicate' before posting I know how to use google — brendosthoughts, May 06 '13 at 09:51
@brendanmorrison Then why does your title reflect the same question as in the duplicate? — Boaz, May 06 '13 at 09:52
@Boaz Because im having the same problem ... and Not entirely sure why after taking what was said in that question ... I could've included six similar question on SO I referenced looking for a solution — brendosthoughts, May 06 '13 at 09:54
@brendanmorrison If you're having the same problem, you shouldn't post a new question. That's exactly what *duplicate* means. Anyway, I don't believe you're having the same problem, so your title is misleading. — Boaz, May 06 '13 at 09:57

score 2 · Answer 1 · edited May 06 '13 at 10:21

I would give some class (say btn) to your button to denote group of elements:

<div id='foo'>
   <div class='btn 1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='btn 3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

Then you could write:

 $(document).ready(function(){
    $('#foo .a').hide();

    var $btn = $('#foo > .btn');
    $('#foo').on('click', '.btn', function() {
        $btn.find('.a').fadeOut();
        $(this).find('.a').fadeIn();
    });
});

http://jsfiddle.net/TUnB2/

my jquery show's only the respective class inside

The key idea is using context for the selector to narrow down the number of selected elements:

$(this).find('.a')

thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem — brendosthoughts, May 06 '13 at 09:59

Kevin Bowersox · Answer 2 · 2013-05-06T09:51:59.673

There are several unclosed div tags in the markup, which is going to affect the fade.

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div> <!-- missing div -->
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div> <!-- missing div --> 
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'> </div> <!-- missing div -->
   </div>
</div>

With the markup fixed we can add the buttons:

HTML

<div id='foo'>
   <div class='1'>
       <div class='a'>a1</div><div class='b'>b1</div>
   </div>
   <div class='2'>
       <div class='a'>a2</div><div class='b'>b2</div>
   </div>
   <div class='3'>
       <div class='a'>a3</div><div class='b'>b3</div>
   </div>
</div>
<button class="toggle">Show 1</button>
<button class="toggle">Show 2</button>
<button class="toggle">Show 3</button>

And then the script to toggle them

Javascript

$("button.toggle").click(function(){
    $("#foo>div:not('." + $(this).index()+"')").fadeOut();
});

/* Note that this relies on the buttons being placed in order */

Working Example http://jsfiddle.net/5vzCe/1/

sorry this was a mistake the div's are not missing in my realy code i hastily shorten theis fro the page im actually attempting to do tis on i've edited the question — brendosthoughts, May 06 '13 at 09:45
thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem — brendosthoughts, May 06 '13 at 09:58
@brendanmorrison Good luck and you will need to put any script that needs to execute on page load in `document.ready` — Kevin Bowersox, May 06 '13 at 10:00

score 1 · Answer 3 · answered May 06 '13 at 09:45

1

Well, although I'm not sure how you're going to go about actually toggling the visibility after the first click...

$('.a').click(function(){
    $('#foo > div').not($(this).parent()).remove();
});

Also.fix those closing </div> tags after you open your <div class='b'> element.

answered May 06 '13 at 09:45

Ohgodwhy

49,779
11
80
110

thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem – brendosthoughts May 06 '13 at 09:59

score 1 · Answer 4 · answered May 06 '13 at 09:53

It seems that your divs with class b are not being closed. Try closing those off and see if you get any results.

Here it is with the closing tags:

<div id='foo'>
   <div class='1'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='2'>
       <div class='a'></div><div class='b'></div>
   </div>
   <div class='3'>
       <div class='a'></div><div class='b'></div>
   </div>
</div>

Also, you need to tell jquery to listen for a click on those buttons of yours.

Here is a sample jquery click event to try out:

$("#foo .1").click(function () {
     $("div", this).fadeIn();
});

This snippet will find all divs, that are within foo 1, and make them fadeIn.

Let me know how this works for you, I haven't tested it.

-Gui

jquery selecting a class nested within another class

4 Answers4