Wirklich nächstes Element mit bestimmten Klasse

Question

Ich bin Neuling in Jquery, Entschuldigung für meine dumme Frage.

Hier ist mein HTML-Code:

<tr role="row" class="odd"> 
    <td><input type="checkbox" class="mycheckbox" value="2166"></td> 
    <td class="sorting_1">2166</td> 
    <td><span class="myparentid">743</span> 
    </td><td>0</td> 
</tr> 

Ich mag würde von 'MyCheckBox' Element springen zu 'myparentid' Element, ohne auf die Baumstruktur. In JQuery, habe ich versucht, so etwas wie:

var checkedRow = $(".mycheckbox"); 
var nextelem = checkedRow.next(".myparentid"); 

Es funktioniert nicht, da neben sucht nur bei Geschwistern ...

Können Sie mir einen Tipp geben?

Danke!

Answer 1

Die einfachste Möglichkeit besteht darin, ein gemeinsames übergeordnetes Element zu gehen (in diesem Fall die Tabellenzeile), dann wieder auf die, die Sie wollen:

$(".mycheckbox").closest("tr").find(".myparentid") 

• https://api.jquery.com/closest/
• https://api.jquery.com/find/

---

Edit: So fügen einige Zusätzliche Informationen:

$(".mycheckbox") 

ist die Ausgangsposition ein, es ist an: tr> td> input.mycheckbox

(wo > im HTML-Baum direkt unter bedeutet)

.closest bewegt sich nach oben, bis der Baum es findet ein passendes übergeordnetes Element, so wird .closest("tr")

<tr role="row" class="odd"> 

, indem man die direkten pare finden nt "td", dann ist es direkter Elternteil "tr".

Normalerweise würde ich eine Klasse verwenden hier (<tr class="businessobjectcontainer">) (je nachdem, was das Business-Objekt ist), dann kann es ein div oder tr sein, wenn Sie diesen Teil später ändern und .odd sehen würde ich nehme an, dies ist für Styling und es wird eine .even sein - das ist also nicht ideal als Selektor. Also müsste "tr" tun.

.find() macht das Gegenteil von .closest und den Baum nach einem passenden Elemente suchen geht, in diesem Fall .myparentid finden: tr> td> span.myparentid

das ist, was Sie suchen.

.find() möglicherweise nicht die effizienteste, aber es ist wahrscheinlich die flexibelste, da es bedeutet, dass Sie den Inhalt Ihrer tr um so viel verschieben können, wie Sie möchten.

Eine Bewegung effiziente Alternative sein könnte zu verwenden:

$(">td>span.myparentid", $(".mycheckbox").closest("tr")) 

aber meistens ist es nur die Syntax ändern.