How to select inside a container with jQuery?

Question

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

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

Answer 1

Just select the descendant span:

 $('#container1 span'); 

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

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

 $('#container1 > span'); 

If you only have a reference to the object, you can:

 $container1.find('span'); 

or

 $container1.children('span'); 

Answer 2

I know you accepted the answer, I just wanted to add another way to do this:

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

I have not tested performance yet, so I do not know which is better. Just thought I'd let you know that you have more options (:

Answer 3

There are many ways to do this. According to your comment in the CMS answer:

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

and

 $('#container1 span:first'); 

on top of other CMS offers.

Answer 4

Use find (expr) . Example:

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