javascript - jQuery 兄弟/子选择器

Question

我正在寻找一种方法来选择包含特定图像的列的行内具有特定名称属性的所有输入。

下面的代码是一个说明性示例:

<table>
  <tr>
    <td class="A">
      <img src="X">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="b">
      <input type="" name="b">
    </td>
  </tr>
  <tr>
    <td class="A">
      <img src="Y">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="b">
      <input type="" name="b">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
  </tr>
</table>

因此，根据上面的示例，我想知道可以使用哪个 jQuery 选择器来选择 inputs的name td 内的“a” tr 内的标签包含和 img 的标签标记为 src =“X”；

Answer 1

为此，您可以使用 :has() 查找具有所需图像的 tr，然后按名称查找子输入，如下所示:

$('tr:has(img[src="X"]) input[name="a"]').addClass('foo');

.foo { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="A">
      <img src="X">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="b">
      <input type="" name="b">
    </td>
  </tr>

  <tr>
    <td class="A">
      <img src="Y">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
    <td class="A">
      <input type="" name="b">
      <input type="" name="b">
    </td>
    <td class="A">
      <input type="" name="a">
      <input type="" name="a">
    </td>
  </tr>
</table>