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="check开发者_JAVA百科box" 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"]')

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

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

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