Jquery: Select one class out of multiple classes with same name?

Question

I need to choose one class from the parent element that I've clicked in a list format. All the while preventing the other classes with the same class name from showing.

So, for example:

$('ul').click(function() {
    $('li').next(".info").css({ "display" : "block" });
});

While I have .info set to display:none;

And my html code is:

<ul>
    <li><span>Guy</span></li>
    <li class="info">
        <p>This should pop up when I click on the "Guy" span.</p>
    </li>
</ul>

Although, I can't seem to figure out why it won't work/fire.

Any help would be hugely appreciated.

David Thomas · Accepted Answer · 2012-09-07 22:51:46Z

2

You're targeting the wrong element, basically. Simply use:

$('ul li').click(
    function(){
        $(this).next('li.info').show();
    });

JS Fiddle demo.

In your original code $(this) is the ul that was clicked (the click event bubbles from the clicked li or span up to the ul), and then looks for the next sibling of the ul that also has the class name of info.

My amendment works by having the target of the click event be the li, which has got a sibling element with the class of info.

Incidentally, on those occasions where jQuery doesn't work, it's helpful to do console.log($(this)) just to check your selector's matching what you think it should be matching.

edited Sep 7, 2012 at 22:51

answered Sep 7, 2012 at 22:21

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

2 Comments

jakenberg Over a year ago

When I used console.log($(this)); it returned [span].

David Thomas Over a year ago

Not with the HTML and code you posted in your question it doesn't (at least, not in Chromium 18).

Ram · Accepted Answer · 2012-09-07 22:41:58Z

0

You can bind the event to the span elements.

$(document).ready(function(){
    $('ul span').click(function() {
        // $('.info').hide()
        $(this).parent().next().show();
    });
})

http://jsfiddle.net/2mvdt/

edited Sep 7, 2012 at 22:41

answered Sep 7, 2012 at 22:24

Ram

145k16 gold badges174 silver badges201 bronze badges

3 Comments

jakenberg Over a year ago

I'm not sure what's still wrong, but even though that worked in fiddle, it didn't work for me.

Ram Over a year ago

@jsksma2 The structure of your markup should be the same as in the fiddle.

jakenberg Over a year ago

I'm retarded. There was other classes that were listed before the .info class. I simply needed to switch them around. Thank you all!

Collectives™ on Stack Overflow

Jquery: Select one class out of multiple classes with same name?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related