Multiple classes or IDs in one jQuery statement used for addressing one specific element

Question

I would like to know how I can have more then one ID and one class in one jQuery statement. So let's say I have this one:

<div id="content1">
    <div id="names">
        <div class="subheader">
            Other names
        </div>
        <div class="subtext">
        </div>
    </div>
    <div id="age">
        <div class="subheader">
            Age
        </div>
        <div class="subtext">
        </div>
    </div>
</div>
<div id="content2">
    <div id="names">
        <div class="subheader">
            Other names
        </div>
        <div class="subtext">
        </div>
    </div>
    <div id="age">
        <div class="subheader">
            Age
        </div>
        <div class="subtext">
        </div>
    </div>
</div>

How can I now do something like:

$("#content #names.subtext").html("some name");

I also tried to use names and age as class. But there I have the same trouble. So is this issue really one or how should that usually be solved instead?

`$("#content #names .subtext").html("some name");` or `$("#content #names .subtext").text("some name");` — Regent, Mar 03 '15 at 13:44
Thanks but no solution because I have some other top ID's additional to "conent". — kwoxer, Mar 03 '15 at 13:48
It works just the same way as Tyranicangel's answer, so either both works or both doesn't work. — Regent, Mar 03 '15 at 13:59

score 1 · Answer 1 · answered Mar 03 '15 at 13:43

1

You can use .find

$('#content').find('#names').find('.subtext').html('foo');

answered Mar 03 '15 at 13:43

Tyranicangel

189
2
16

o--oOoOoO--o · Answer 2 · 2015-03-03T16:44:46.347

1

As IDs must be unique, you will have to use classes instead:

<div id="content1">
    <div class="names">
        <div class="subheader">
            Other names
        </div>
        <div class="subtext">
        </div>
    </div>
    <div class="age">
        <div class="subheader">
            Age
        </div>
        <div class="subtext">
        </div>
    </div>
</div>
<div id="content2">
    <div class="names">
        <div class="subheader">
            Other names
        </div>
        <div class="subtext">
        </div>
    </div>
    <div class="age">
        <div class="subheader">
            Age
        </div>
        <div class="subtext">
        </div>
    </div>
</div>



$(".names .subtext").html("some name");

edited Mar 03 '15 at 16:44

answered Mar 03 '15 at 13:44

o--oOoOoO--o

770
4
7

Actually I already had this one. But I plan to have some other top id's additional to "content". So no solution for me but thanks. – kwoxer Mar 03 '15 at 13:45
Humm, do you want to target multiple ids at the same time, instead of nested? – o--oOoOoO--o Mar 03 '15 at 13:47
You can't have repeated IDs in the same page context. You need to use classes instead. I also edited my answer. – o--oOoOoO--o Mar 03 '15 at 16:43

score 1 · Accepted Answer · answered Mar 03 '15 at 13:51

1

If the elements are direct childs of your content you can use the child-selector of css:

$('#content > #names > .subtext').html('some name');

Demo

answered Mar 03 '15 at 13:51

empiric

7,825
7
37
48

Indeed that's even shorter. But could you tell me if there is a difference to `$('#content #names .subtext').html('some name');` because is also working. – kwoxer Mar 03 '15 at 14:14
`x > y` matches direct child of the parent elemtent, whereas `x y`matches when an element y is an arbitrary descendant. Have a look [here](http://stackoverflow.com/q/1182189/4202224). So because of the specification, the child selector is going to be faster on large sites – empiric Mar 03 '15 at 15:14

Multiple classes or IDs in one jQuery statement used for addressing one specific element

3 Answers3