Quelle est la meilleure approche pour atteindre un autre nœud ayant un grand-parent commun comme nœud actuel?

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> 

Dites, j'ai un <table> qui contient un couple <tr> comme celui ci-dessus. Parmi les <tr>, il n'y en a qu'un qui a <span id="home_location_indicator">(Home)</span>.

Je suis en train de décider de l'approche à prendre pour récupérer la valeur de l'entrée name="location_select" qui appartient à la <tr> contenant <span id="home_location_indicator">.

Voici les deux approches que je peux penser à:

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

Lequel est une meilleure approche? Et pourquoi? Ou est-ce important?

Answer 1

La meilleure approche serait d'utiliser .closest() au lieu de .parents(), car il s'arrêtera de parcourir une fois qu'il trouvera une correspondance.

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

Cela est beaucoup mieux que l'approche descendante:

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

Votre deuxième approche est beaucoup mieux car il restreindre le déplacement à partir de ID et traverser de là .. Voir ci-dessous avec peu de modifications de ce que vous avez,

Edit:.closest est en utilisant mieux que .parents ->Proof

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

Le .has("#home_location_indicator") dans votre première approche ne fait pas beaucoup de sens parce que vous êtes à la recherche d'une carte d'identité. Si vous souhaitez obtenir un ID, utilisez $('#IDSelector'), qui est le sélecteur le plus rapide, car il utiliserait document.getElementByID('IDSelector') en interne.