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
– Kevin Bowersox, Commented May 6, 2013 at 9:41
@KevinBowersox will the document.ready affect anything if the page has completely loaded .. though no i do not — brendosthoughts
– brendosthoughts, Commented May 6, 2013 at 9:47

Gondon · Accepted Answer · 2013-05-06 10:21:51Z

2

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')

edited May 6, 2013 at 10:21

Gondon

646 bronze badges

answered May 6, 2013 at 9:50

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brendosthoughts Over a year ago

thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem

Ohgodwhy · Accepted Answer · 2013-05-06 09:45:56Z

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 6, 2013 at 9:45

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

1 Comment

brendosthoughts Over a year ago

thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem

Kevin Bowersox · Accepted Answer · 2013-05-06 09:51:59Z

1

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/

edited May 6, 2013 at 9:51

answered May 6, 2013 at 9:43

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

3 Comments

brendosthoughts Over a year ago

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 Over a year ago

thanks for the help I'm Going to take all suggestion's from everyone and see what If I can solve my exact problem

Kevin Bowersox Over a year ago

@brendanmorrison Good luck and you will need to put any script that needs to execute on page load in document.ready

Gondon · Accepted Answer · 2013-05-06 09:53:09Z

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

Collectives™ on Stack Overflow

jquery selecting a class nested within another class

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related