162

I have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

I want to be able to use a selector that selects the inside div, but specific for the mydiv container. How can I achieve this with jQuery?

double-beep
  • 5,031
  • 17
  • 33
  • 41
Liron Harel
  • 10,819
  • 26
  • 118
  • 217

5 Answers5

332

Try:

$('#mydiv').find('.myclass');

JS Fiddle demo.

Or:

$('.myclass','#mydiv');

JS Fiddle demo.

Or:

$('#mydiv .myclass');

JS Fiddle demo.

References:

Good to learn from the find() documentation:

The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

Rakib
  • 12,376
  • 16
  • 77
  • 113
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 2
    the second two one will not work, but find is Ok. The second two one will select every class=myclass and select every id=mydiv) i think. – czupe Aug 09 '12 at 16:33
  • 2
    @czupe: no, while the context-selector approach is written differently jQuery implements, internally, the same `$('#mydiv').find('.myclass');` approach as used in the first code snippet. Incidentally: '...select every `id=mydiv`'? There should only *ever* be one use of a given `id` in a page (an `id` [***must*** be unique within the document](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)). – David Thomas Apr 18 '13 at 15:23
  • @DavidThomas Well I just tried $('#mydiv .myclass'); and that ended up selecting all divs that have the class myclass rather than just the divs within mydiv. – user3281466 Jul 10 '14 at 16:28
  • @user3281466: really? That seems unlikely, can you [reproduce your problem](http://jsFiddle.net/)? – David Thomas Jul 10 '14 at 16:55
  • how to you check for anything in at div and then put it in :not() – SuperUberDuper Mar 26 '15 at 17:17
  • @SuperUberDuper: I'm afraid I don't understand quite what you want. Rather than asking questions in comments, you may want to try searching the site, or, if that question hasn't already been asked, you could [ask a question](http://stackoverflow.com/questions/ask) yourself. – David Thomas Mar 26 '15 at 18:18
  • @DavidThomas thx I just done it like this by adding an extra class to the offending div: :not(.dont) – SuperUberDuper Mar 26 '15 at 19:48
23

Try this

$("#mydiv div.myclass")
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • Or if you don't care if it's a `div` (or if it will always be a `div`) you can simplify to $("#mydiv .myclass"). – Michael Mior Aug 03 '11 at 21:54
  • @Michael - Yes, we can just say .mycalss but if we know its a div, div.myclass will make search faster. – ShankarSangoli Aug 03 '11 at 21:56
  • @Shankar, it most probably won't make it faster, rather slower. assuming jquery uses sizzle and not a native `document.queryselectorall` it will probably search in the same fashion and in your case perform an **extra** check. Possible that native implementations do the same. – davin Aug 03 '11 at 22:00
  • Some quick tests I ran suggest that this is browser dependent. It appeared marginally faster in Chrome and marginally slower in FF. Either way, unless you're running this selector many times or over a large number of elements, the difference is probably negligible. See [here](http://jsfiddle.net/f4XCT/) for my crude (and possibly flawed) test. – Michael Mior Aug 03 '11 at 22:10
  • @Michael - If we specify the tagname along with class name, it will first use getElementsByTagName and then look for class name which iw definately faster and still using the native method to do the first level sorting. Anways it is negligible if there are not many elements to be selected. – ShankarSangoli Aug 04 '11 at 01:13
  • This doesn't match the results I'm seeing in testing. Although as I said, my methodology may be flawed. – Michael Mior Aug 04 '11 at 14:31
13

You'll do it the same way you would apply a css selector. For instanse you can do 

$("#mydiv > .myclass")

or

$("#mydiv .myclass")

The last one will match every myclass inside myDiv, including myclass inside myclass.

Haedrian
  • 4,240
  • 2
  • 32
  • 53
Leandro Galluppi
  • 915
  • 1
  • 7
  • 19
8

If you want to select every element that has class attribute "myclass" use

$('#mydiv .myclass');

If you want to select only div elements that has class attribute "myclass" use

$("div#mydiv div.myclass");

find more about jquery selectors refer these articles

e11438
  • 864
  • 3
  • 19
  • 33
1

try this instead $(".video-divs.focused"). This works if you are looking for video-divs that are focused.

Kirk Backus
  • 4,776
  • 4
  • 32
  • 52
user3749775
  • 231
  • 2
  • 2