使用jQuery选择特定的后代

Question

In JQuery's Documentation the "parent > child" selector selects all direct child elements specified by "child" of elements specified by "parent". "Direct child" is just the element one level down. For example, I have this code:

    ...
    <table class="advanceSearch">
      <tr>
        <td>
          <ul class="form">
            <li>
              <label>Document Type:</label>
              <input type="text" id="cmbDocumentType" name="paramtitle" />
            </li>
            <li>
              <label>Title:</label>
              <input type="text" id="paramtitle" name="paramtitle" />
            </li>
            <li>
              <label>Notes:</label>
              <input type="text" id="paramNotes" name="paramNotes" />
            </li>
            <li>
              <label>Revision Number:</label>
              <input type="text" id="paramRevisionNumber" name="paramRevisionNumber" />
            </li>
            <li>
              <label>Draft Number:</label>
              <input type="text" id="paramDraftNumber" name="paramDraftNumber" />
            </li>
            <li>
              <label>Version Number:</label>
              <input type="text" id="paramVersionNumber" name="paramVersionNumber" />
            ...

I want to select the input elements with ids starting with "param", and so I used the find() instead of the parent > child selector:

      $("table.advanceSearch").find("ul.form").find('input[id^="param"]').attr("disabled", "disabled");

This works well but I find it redundant having two find() selectors. Is there any way to have the shorthand for this?

Answer 1

You don't actually need .find() at all; you can use two descendant selectors instead.

$('table.advanceSearch ul.form input[id^="param"]')

Remember: x > y (the child selector) is more-or-less interchangeable with $('x').children('y') , and $('x y') is more-or-less interchangeable with $('x').find('y') .

Answer 2

Try this:

$('table.advanceSearch ul.form input[id^="param"]').prop('disabled', true);

OR

$('table.advanceSearch ul.form').find('input[id^="param"]').prop('disabled', true);

OR

$('table.advanceSearch ul.form li').children('input[id^="param"]').prop('disabled', true);

Answer 3

Your selector can be much longer:

$(".advanceSearch input[id^='param']").prop("disabled", true);

This will do the same, without the verbosity.