jQuery wählen Sie alle Kinder der nächsten

Question

Ich möchte die .red-border-Klasse zu einem div hinzufügen und alle <td> s in der nächsten <tr>.

Aber mit .closes() bekomme ich nur die Elemente unmittelbaren Elternteil <td>.

Gibt es eine Möglichkeit, dass ich alle Kinder der nächsten <tr> zielen kann?

Mein Code ist unten.

Mein aktueller fehlerhafte JS:

$('#myelement').closest('.container, tr td').addClass('red-border'); 

Offensichtlich ist dies nur Ziele 1 td. Ich möchte sie alle umfassen.

Mein HTML:

<div id="container"> 
<span class="myelement">element</span> 
</div> 

<table> 
    <tr> 
    <td></td> 
    <td><span class="myelement">element</span></td> 
    <td></td> 
    </tr> 
</table> 

Edit: normalerweise könnte ich die .find() Funktion verwenden, aber dies würde nicht mit dem or Betreiber arbeiten.

Answer 1

Ich hoffe, das ist, was Sie erwarten. Sie müssen durch jede tr und fügen red-border Klasse zu seinem ersten td mit td:first Selektor wie unten

$(document).ready(function() { 
 
    $('#container').addClass('red-border'); 
 
    $('tr').each(function(){ 
 
    $(this).find('td:first').addClass('red-border'); 
 
    }) 
 
})

.red-border{ 
 
    border:red 2px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <span class="myelement">element</span> 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td>First row First TD</td> 
 
    <td><span class="myelement">element</span> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Second row First TD</td> 
 
    <td><span class="myelement">element</span> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 2

Warum möchten Sie es in einer einzigen Zeile? teilen Sie es einfach auf zwei, es wird einfacher sein.

$('.myelement').closest('#container').addClass('red-border'); 
$('.myelement').closest('tr').find('td').addClass('red-border'); 

durch die Art und Weise, genannt Sie #myelement wenn Ihr Tag myelement eine Klasse hatte. Es sollte mit .myelement aufgerufen werden. Und der Container ist eine ID so #container

Answer 3

Nach Ihrer Struktur zu durchlaufen Sie hierfür gehen:

$(".myelement").parents("#container").addClass('red-border').siblings("table").find("tr").eq(0).children().addClass('red-border'); 

ziele auf die Eltern #container mit parents(). Dies wird nichts für die span innerhalb td geben. Dann zielen Sie auf seine Geschwister table und die erste tr mit eq(0).

Answer 4

Anruf Klasse Element mit .myelement statt #myelement

$('.myelement').closest('.container, tr td').css({"color": "red", "border": "2px solid red"}); 

oder

$('.myelement').closest('.container, tr td').addClass('red-border');