comment référencer un élément enfant sur un élément cloné

Question

Je cours des tests sur un élément DOM, le résultat des tests est l'un des descendants de l'élément. par exemple:

<div id="myelement" class="some-class"> 
    <div class="some-child-class"></div> 
    <div class="some-other-child-class"> 
    <div class="grandchild-class"></div> 
    <div class="another-grandchild"></div>* 
    </div> 
</div> 

supposons que:

test(document.getElementById('myelement')); 

renverra l'élément marqués d'un astérisque

Maintenant, mon problème est: La procédure d'essai est lourd et consomme beaucoup de ressources. Je ne veux pas l'exécuter quand je ne dois pas. Et parfois, je clone un élément qui a déjà été testé (je veux dire le résultat du test), mais comme je reçois une référence d'objet, je ne peux pas l'utiliser pour accéder à l'enfant sur le clone élément.

Existe-t-il un moyen efficace de "sauvegarder" le chemin relatif d'un élément parent vers un élément DOM descendant spécifique, puis de "l'appliquer" sur un autre élément?

Answer 1

Vous pouvez utiliser jQuery pour cela.

Les sélecteurs qu'ils utilisent peuvent prendre la forme de 'nth-child' ou 'nth-of-type' (voir la documentation here).

Ce qui est fait est que cible élément enfant de la position qu'ils ont par rapport à d'où vous démarrez. Dans votre cas si vous voulez commencer à partir de votre premier élément et descendre à l'un étoilé que vous pouvez faire:

$('#myelement').find('div:nth-child(2) > div:nth-child(2)') 

Ce que cela fait est que cela prend #myelement comme une base à partir de laquelle vous commencerez la recherche , et après cela, il descend au deuxième élément enfant qui est un div, et encore dans le deuxième élément enfant de cette div. Vous pouvez réutiliser ce sélecteur avec une base différente.

Answer 2

Vous pouvez donc attribuer des identifiants uniques à chaque élément et mettre en cache les résultats du test dans un objet à l'ID Elements. Cependant, je ne sais pas si c'est utile. Un exemple d'implémentation:

var test=function(el){ 
    return this[el.id] || (this[el.id]=advancedtesting(el)); 
}.bind({}); 

Alors vous pouvez faire:

test(document.getElementById('myelement'));//caches 
test(document.getElementById('myelement'));//returns the cached