Localisation d'éléments dynamiques via innerHTML

Question

Je dois tester une chaîne innerHTML particulière sur une page Web qui charge des informations utilisateur. Mon problème est, l'emplacement [14] de cet élément varie en fonction des autres détails du compte étant présents ou non. (c'est-à-dire parfois que innerHTML est [15] ou [16]) innerHTML n'a pas d'identifiant autre que le nom de classe "style16".

Moreso le innerHTML change entre chaque compte, et donc pourquoi j'ai besoin de tester sa valeur. Dois-je créer une sorte de var pour référencer cet emplacement d'élément? Si oui, comment puis-je le faire.

Voici le HTML:

<tr> 
    <td class="style16">Zip:</td> 
    <td>12345</td> 
</tr> 
<tr> 
    <td class="style16">CountryCode:</td> 
    <td>TH</td> 
</tr> 

Je suis nouveau à DOM et Javascript donc des excuses si cela est source de confusion.

Merci à l'avance

Answer 1

function find(elem){ 
    if(elem.innerHTML=="TD"){ 
    return elem;//found elem lets return 
    } 
    for(child of elem.childNodes){ 
    if(var a=find(child)){ 
     return a;//a child of child of child... is the searched one, so return it 
    } 
    } 
return false;//nothing found 
} 

Utilisez comme ceci:

window.onload=function(){ 
elem=find(document.body); 
if(elem){ 
// now you can use elem until it is destroyed... 
elem.innerHTML="found this"; 
}else{ 
alert("Sorry doesnt exist"); 
} 
} 

Remarque: plus le DOM pour faire défiler la cuvette plus il a besoin. Ainsi, pour améliorer les performances, vous pouvez commencer par un élément parent qui contient la recherche de shure, par exemple find (document.getElementById ("parent"))

Si vous connaissez la classe de l'élément parent, vous pouvez le faire:

var elems=[...document.getElementsByClassName("style16")]; 
var elem=false; 
var found=elems.some(function(el){ 
    if(el.parentNode.childNodes[1].innerHTML=="TD"){ 
     elem=el.parentNode.childNodes[1]; 
     return true;//kill execution 
    } 
}); 
if(found){ 
    console.log(elem); 
}else{ 
    alert("not found"); 
} 

Answer 2

vous pouvez parcourir tous les éléments de la même classe comme celui-ci dans jQuery:

$('.style16').each(function(i, obj) { 
    var innerHTML = $(this).next().text();//next returns the next 'td' sibling 
}); 

de cette façon, vous pouvez suivre tous les éléments innerHTML que vous recherchez.