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选择我可以使用选择的inputsname“一个“在td标签内的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>