CODEWITHSUNDEEP
jqueryhtmljquery-selectors
Matt Welander
Matt Welander

Reputation: 8548

jquery select element with class X inside div with id Y

<div id="slide2" class="slide" style="z-index:2;">
    <div style="display:none; z-index:1;position:absolute; bottom:10px;right:10px;padding:20px; background:#fff;border:solid 1px black;border-radius:15px;box-shadow: 4px 4px 3px #888888;" class="rss_qrcode"></div>
</div>

This works:

$('.rss_qrcode').css('display', 'block');

This does not work:

$('#slide2.rss_qrcode').css('display', 'block');

And I need to be able to manipulate only divs with the class rss_qrcode that reside in the #slide2 div...

I also tried

$('#slide2')find('.rss_qrcode').css('display', 'block');

Didn't work either =(

Upvotes: 0

Views: 3494

Answers (3)

Techsin
Techsin

Reputation: 532

You made it sound complicated while it's not...when you have id it dosen't matter of whose id it's.

So code below is just what you need:

$('#2>.b').css("background-color", "red");

Demo: http://jsfiddle.net/Q6FUM/1/

Before you get into jquery selectors which are mostly css selectors but modified here and there you need to get a hold of css selectors. The link below will get you started on it..

http://www.w3schools.com/cssref/css_selectors.asp

Selectors are just way to select an element in html it could be via class, id, attributes, or heritage ( like the first child of abc div). There are some selectors that are not available but will be in next version of css.

You maybe wondering what is a difference between .class.class vs .class .class, well take a look here, What is the difference between the selectors ".class.class" and ".class .class"?.

Upvotes: 0

H&#233;lio Dolores
H&#233;lio Dolores

Reputation: 63

Try to do this:

$('#slide2 > .rss_qrcode').css('display', 'block');

Learn more about selectors here: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Upvotes: 1

azz
azz

Reputation: 5930

You're off by one character in both cases!

$('#slide2 .rss_qrcode').css('display', 'block');
//        ^-- space here means look inside #slide2

OR

$('#slide2').find('.rss_qrcode').css('display', 'block');
//          ^-- dot required for function chaining

Upvotes: 5

Related Questions