3

Using JQuery, how do I select all elements with class x within an element with id y?

Marko
  • 71,361
  • 28
  • 124
  • 158
dmr
  • 21,811
  • 37
  • 100
  • 138
  • what do you want to do with these elements? Just select them? – Catfish Aug 25 '10 at 21:06
  • Shouldn't an id always be unique? – drummondj Aug 25 '10 at 21:07
  • @Catfish No, but I know how to do the rest. I'm just getting confused with the selecting. – dmr Aug 25 '10 at 21:07
  • @John It seems like you're confused about my question. I have an element with id y. There are many elements that are children of that element. Some of the children have a class X. I want to select all the children with class X. – dmr Aug 25 '10 at 21:09
  • Sorry, I mis-read the question. – drummondj Aug 25 '10 at 21:10
  • Take a look here http://stackoverflow.com/questions/3177763/whats-the-fastest-method-for-selecting-descendant-elements-in-jquery – Marko Aug 25 '10 at 21:19

5 Answers5

6

Selecting all descendants with class x of an element with the id "y".

$("#y .x").each(function () {
   $(this) <- your element
});

Selecting all childrens with class x of an element with the id "y".

$("#y > .x").each(function () {
   $(this) <- your element
});
Lasse Espeholt
  • 17,622
  • 5
  • 63
  • 99
  • 1
    The first code is the same as `$("#y").find(".x")` and the second is the same as `$("#y").find("> .x")` – BrunoLM Aug 25 '10 at 22:04
  • @BrunoLM +1 Good addition, I prefer my method, though. Also, if he wants to do ex `.click` instead, then `.each` is removed anyway. – Lasse Espeholt Aug 25 '10 at 22:23
5

$('#y .x') should do it for you.

note that this will select all descendants with class x, not just children.

user113716
  • 318,772
  • 63
  • 451
  • 440
Andrew Wirick
  • 184
  • 4
  • +1 for brevity (Ironic that I can't just put that as a comment: "Comments must be at least 15 characters in length.") – Homer Aug 25 '10 at 21:38
4
$("#x .y").doSomething();

$(".y", "#x").doSomething();

$("#x").find(".y").doSomething();

And for immediate children:

$("#x > .y").doSomething();

$("#x").children(".y").doSomething();

Have a look at my question here, it tells you a bit more and it covers performance. What is the fastest method for selecting descendant elements in jQuery?

Community
  • 1
  • 1
Marko
  • 71,361
  • 28
  • 124
  • 158
  • 1
    +1 - Thorough answer. Just thought I'd point out that in your second example, you don't need to pass a jQuery object for the context. You could just pass the string `"#x"`. jQuery flips it around into your third version behind the scenes. :o) – user113716 Aug 25 '10 at 21:53
2

Use $("#id .class")

drummondj
  • 1,483
  • 1
  • 10
  • 11
1

Where you have element 1 with id='y' and you want all it's [immediate] children that have a class='x'

$("#y > .x").each(function(){stuff]);

If you want all decendants of id='y' (not just immediate) then you would do:

$("#y").find(".x").each(function(){stuff});

Obviously, you could make it smarter (and better) by adding element types if you know what they are. For example, if you want only children of type then:

$("#y > a.x").each(function(){stuff]);

Hope that's what you meant.

patrickgamer
  • 511
  • 3
  • 15
  • Using `.children()` doesn't give you all descendants. Just immediate. You're thinking of `.find()`, which will return all matching descendants. – user113716 Aug 25 '10 at 21:45