jQuery Geschwister-/Kinderselektor

Question

Ich suche nach einer Möglichkeit, alle Eingaben mit einem bestimmten Namensattribut innerhalb einer Zeile auszuwählen, die eine Spalte enthält, die ein bestimmtes Bild enthält.

Der folgende Code ist ein anschauliches Beispiel:

<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>

oben am Beispiel So basiert, würde ich gerne wissen, was ich jQuery-Selektor die inputs von name "auswählen kann a "Das sind innerhalb eines td Tags, das innerhalb eines tr Tags mit und img Tags mit src =" X "ist;

Answer 1

Um dies zu tun, Sie :has() verwenden können die tr mit dem erforderlichen Bild zu finden und dann die untergeordneten Eingänge von Namen finden, etwa so: wenn

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