Question

在JQuery's Documentation中，"parent > child"选择器选择由“parent”指定的元素“child”指定的所有直接子元素。 “直接孩子”只是一个级别的元素。例如，我有这段代码：

    ...
    <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" />
            ...

我想选择带有以“param”开头的ID的input元素，因此我使用find()代替parent > child选择器：

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

这很有效，但我觉得它有两个find()选择器是多余的。有什么办法可以用这个简写吗？

Answer 1

你根本不需要.find();你可以使用两个后代选择器。

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

请记住：x > y（子选择器）与$('x').children('y')或多或少可互换，而$('x y')或多或少可与$('x').find('y')互换。< / p>

Answer 2

试试这个：

$('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

你的选择器可以更长：

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

这样做也是如此，没有冗长。

使用Jquery选择特定的后代

3 个答案: