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>