Was ist ein besserer Ansatz, um zu einem anderen Knoten zu gelangen, der einen gemeinsamen Großelternteil als aktuellen Knoten hat?

Question

<tr> 
    <th scope="row"> 
     <span id="home_location_indicator">(Home)</span> 
    </th> 
    <td> 
     <span class="postal_code_display">...</span> 
    </td> 
    <td><input value="1" name="location_select" type="radio" /></td> 
</tr> 

Say, ich habe eine <table>, die ein paar <tr> 's wie die oben genannten enthält. Unter den <tr> gibt es nur eine, die <span id="home_location_indicator">(Home)</span> hat.

Ich versuche, auf dem Ansatz, um zu entscheiden, für das Abrufen des Wertes des Eingangs name="location_select", die die <tr> zu nehmen <span id="home_location_indicator"> enthalten, gehört.

Hier sind die beiden Ansätze kann ich mir vorstellen:

1. $("tr").has("#home_location_indicator").find('input[name="location_select"]').val()
2. $("#home_location_indicator").parents("tr").find('input[name="location_select"]').val()

Welches ein besserer Ansatz ist? Und warum? Oder ist es überhaupt wichtig?

Answer 1

Der beste Ansatz wäre, statt .parents() zu verwenden, weil es aufhört zu traversieren, sobald es eine Übereinstimmung findet.

$("#home_location_indicator") // ID, very fast 
    .closest("tr") // Upwards traversal, fast, stops at tr 
    .find(':radio[name="location_select"]').val() // Find, slow-ish 

Das ist viel besser als der Top-down-Ansatz:

$("tr") // getElementsByTagName, very fast 
    .has("#home_location_indicator") // traverse EVERY tr ALL the way down, very slow! 
    .find('input[name="location_select"]').val() // Find, slow-ish 

Answer 2

Ihr zweiter Ansatz ist viel besser als es die Verfahrgeschwindigkeit von ID beginnen verengen würde und von dort aus durchquert .. Siehe unten mit wenig Modifikation von dem, was Sie haben,

Edit:.closest Verwendung ist besser als .parents ->Proof

$("#home_location_indicator") 
    .closest("tr") 
    .find(':radio[name="location_select"]').val() 

Die .has("#home_location_indicator") in Ihrem ersten Ansatz nicht viel Sinn machen, weil Sie eine ID suchen. Wenn Sie eine ID erhalten möchten, verwenden Sie $('#IDSelector'), was der schnellste Selektor ist, weil intern document.getElementByID('IDSelector') verwendet würde.