CODEWITHSUNDEEP
jqueryhtml
Alexandre
Alexandre

Reputation: 13328

Find deeply nested input by jquery

    <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"]')

Upvotes: 1

Views: 5762

Answers (3)

binarious
binarious

Reputation: 4588

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)');

Upvotes: 4

James Allardice
James Allardice

Reputation: 166051

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');

Upvotes: 3

Jon
Jon

Reputation: 437814

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).

Upvotes: 3

Related Questions