How to select within a container with jQuery?

Question

<div id="container1">
<span>...</span>
</div>
<div id="container2">
<span>...</span>
</div>

Say if I have get the jQuery object $('container1'),how to find the <span> in it?

Answer 1

Just select the descendant span:

$('#container1 span');

Note that this will select any span inside #container1, even if is not a direct descendant.

If you want to select only direct descendants, use the parent > child selector:

$('#container1 > span');

If you have only an object reference you could:

$container1.find('span');

Or

$container1.children('span');

Answer 2

Use find( expr ). Example:

$("p").find("span").css('color','red');

Answer 3

There are a lot of ways to do that. According to your comment at CMS answer:

$('#container1').find('span:first');

and

$('#container1 span:first');

on top of CMS's other suggestions.

Answer 4

I know you have accepted an answer, I'd just like to add another way of doing this:

$("span", $container1); //This will start in your variable $container1
                          and then look for all spans

I haven't tested performance on these yet, so I don't know which is better. Just thought I'd let you know you have more options (: