Find deeply nested input by jquery

Question

    <div id="customerServices">
      <div id="pnlCustomerServices_Container">
        <!-- and many others divs...... -->
       <div id="s1_Container">
         <div id="ext-gen32">
           <!-- and many others divs........ -->
          <input type="checkbox" id="s1" 
               name="s1" class=" x-form-checkbox and_many_classes.....  parent" value="s1">
             <label for="s1" class="x-form-cb-label font-bold" 
                 id="ext-gen33">Label1Text</label>
           <!-- and many others divs........ --->
           </div>
         </div>

<div id="s2_Container">
         <div id="ext-gen33">
           <!-- and many others divs........ -->
          <input type="checkbox" id="s2" 
               name="s2" class=" x-form-checkbox and_many_classes.....  parent" value="s2">
             <label for="s2" class="x-form-cb-label font-bold" 
                 id="ext-gen34">Label1Text</label>
           <!-- and many others divs........ --->
           </div>
         </div>

       </div>
    </div>

I want to find all input checkBox (in this case input checkBox id="s1" and input checkBox id="s2") that have the attribute class contains "parent" and nested inside div id="customerServices".

But the difficult is it's unknown how many divs are between customerServices and input class = "parent" and how many values has input's attribute class.

update: some time ago I was using the following code. But it doen't work for the current task.

$('#customerServices input:checkbox[class="parent"]');

update2: And one more thing. How can I find the checkBox which doesn't have attribute class=parent

 $('#customerServices  input:checkbox[class^="parent"]')

Is there something wrong with $("input:checkbox.parent")?

Jon
– Jon

2011-09-05 11:08:34 +00:00
Commented Sep 5, 2011 at 11:08 — Jon
– Jon, Commented Sep 5, 2011 at 11:08

binarious · Accepted Answer · 2011-09-05 11:26:42Z

4

What's wrong with:

$('.parent')

or

$('input .parent')

To your update:

$('#customerServices input:checkbox[class="parent"]');

selects the checkbox where class equals "parent". But your class attribute contains much more. You need:

$('#customerServices input:checkbox.parent');

update 2:

$('#customerServices input:checkbox:not(.parent)');

edited Sep 5, 2011 at 11:26

answered Sep 5, 2011 at 11:09

binarious

4,58828 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon · Accepted Answer · 2011-09-05 11:12:06Z

3

You should be able to select the elements you want with

$("input:checkbox.parent")

There is no immediately obvious reason of getting involved with the <div id="customerServices">, but if you want to cut down on the DOM traversal you can use the stricter

$("#customerServices input:checkbox.parent")

Finally, your previous solution of

$('#customerServices input:checkbox[class="parent"]')

does not work because it only selects elements that only have the parent class, and not those that have additional classes. Since it's very unusual to have this exact requirement (I have never seen it in the wild), IMHO a selector like this should be considered a bug (even if it works at the time when it's written).

answered Sep 5, 2011 at 11:12

Jon

439k85 gold badges756 silver badges820 bronze badges

Comments

James Allardice · Accepted Answer · 2011-09-05 11:12:53Z

3

Your code:

$('#customerServices input:checkbox[class="parent"]');

Does not work because you're using the "attribute equals" selector, which will look to match the entire value of the class attribute (and as you have multiple class names listed, it will look to match that entire string).

However, the class selector, ., will match an individual class name. You can therefore use the class selector, instead of the attribute selector and it should work:

$('#customerServices input:checkbox.parent');

answered Sep 5, 2011 at 11:12

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Collectives™ on Stack Overflow

Find deeply nested input by jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related