CODEWITHSUNDEEP
javascriptjqueryhtmlcss
domdomcodecode
domdomcodecode

Reputation: 2443

jquery select child through random generated divs

I have a bunch of generated divs that I'd like to grab a specific child of.

Each one is roughly set up like this:

<div id="generated-row-N>
    <div class="seriously-generated-crap">
        <div id="still-seriously-generated-crap-N">
            <input name="child-to-select-N">
        </div>
    </div>
</div>

Where N is a counter

I'm not well versed in all the different kinds of jQuery selectors, what I've attempted is a combination of the "begins with" selector and the "child" selector.

$("div[id^=generated-row-] > input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

I assume my error is it's thinking the child is a direct child of the parent with no elements in between. Is there a way to get through the two other divs and grab a child regardless of how many levels deep it is?

note: I'm not listing the other childs because the generated class and id names are not reliable to use.

Thanks in advance. I haven't had much luck finding similar topics on SO, if this is a duplicate, please let me know.

Upvotes: 2

Views: 573

Answers (6)

monu
monu

Reputation: 370

var test= $("div[id^='generated-row-'] input[name^='child-to-select-']")

Upvotes: 1

collapsar
collapsar

Reputation: 17238

If you assign a common css class to-process to your input elements, your code simplifies to 

$(".to-process").each(function(){
  // stuff I'm going to do to each input child
});

other advantages:

  • no need to worry about the actual embedding html structure of the elements of interest
  • common styling simplified

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

> is the immediate children selector, just omit it.
And also wrap the values of your attributes with single quotes ''

$("div[id^='generated-row-']  input[name^='child-to-select-']")

Upvotes: 4

Milind Anantwar
Milind Anantwar

Reputation: 82241

You do not need immediate child selector.Use:

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
  // stuff I'm going to do to each input child
});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Use descendant selector,

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

or use .find()

$("div[id^=generated-row-]").find("input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

Please keep this in your mind, the elements which are located in the first level of the parent is said to be child elements, on the other hand the elements which are located more than one level deeper to the parent is called as descendants, Additionally children are also comes under the category of descendant.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use descendant selector instead of child selector

$("div[id^=generated-row-] input[name^=child-to-select-]").each(function(){
    // stuff I'm going to do to each input child
});

when you use a child selector it will search only the direct children of the target parent, in your case the input element is coming at the 3rd level means it is an descendant element not a child

Also to make it much easier apply class like

<div id="generated-row-N" class="generated-row">
    <div class="seriously-generated-crap">
        <div id="still-seriously-generated-crap-N">
            <input name="child-to-select-N" class="child-to-select">
        </div>
    </div>
</div>

then

$(".generated-row input.child-to-select").each(function(){
    // stuff I'm going to do to each input child
});

Upvotes: 3

Related Questions