web-dev-qa-db-fra.com

Javascript obtenir le texte HTML interne pour span par nom de classe

Ceci est le format de base du code dans lequel la table est contenue dans un div nommé

<div class="leftCol">    
.....
<tr id="my_cd">
<td><span class="agt_span">My Code</span></td>
</tr>
.....
</div>

Je dois pouvoir obtenir le texte contenu dans la classe span. Dans ce cas, je dois extraire le texte "Mon code" puis l'ajouter à un tableau. L'ajout de texte dans un tableau n'est pas une question facile, mais je ne vois pas comment extraire le texte. Peu importe ce que j'essaie, je ne peux rien obtenir d'autre qu'une valeur "non définie".

Comment obtenir la valeur de texte Inner HTML pour une étendue par nom de classe?

Première question résolue merci !!

Deuxième question développez d'abord: 

<div class="leftCol">    
.....
<tr id="my_cd">
  <td><span class="agt_span">My Code</span></td>
  <td>
    <div>
      <select name="agt_drp" id="agt_drp" class="agt_drp">...</select>
    </div>
  </td>
</tr>
</div>

Disons que j'ai l'identifiant de sélection "agt_drp" et que je veux obtenir le texte de la classe span. Y'a-t'il un quelconque moyen d'y arriver?

javascriptjqueryhtmlcss
7
George Gervin

Jquery:

var test = $("span.agt_span").text();
alert(test):

Javascript: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

6
NubPro

dans javascript, vous pouvez utiliser getElementsByClassName ():

var htmlString = document.getElementsByClassName('agt_span')[0].innerHTML;

https://jsfiddle.net/ky38esoo/

Notez l'index derrière la méthode.

2
Konstantin

JQuery: 

$('span.agt_span').text();

Pure JavaScript (vous devez spécifier la position de votre élément de classe: [0] pour obtenir le premier):

document.getElementsByClassName('agt_span')[0].innerHTML;

Si vous avez plusieurs éléments avec cette classe, vous pouvez y faire une boucle:

var elts = document.getElementsByClassName('agt_span');
for (var i = 0; i < elts.length; ++i) {
    alert(elts[i].innerHTML);
}
1
Magicprog.fr

Bien que getElementsByClassName semble être supporté par tous les principaux navigateurs, c'est maintenant un argument pour l'utiliser. Pour que votre code soit compatible et utile, utilisez mieux le standard W3C DOM niveau 3 Core . Le document IDL ne décrit pas une telle méthode ici!

Alors s'il vous plaît utiliser

var table = document.getElementById("my_cd"); /* id is unique by definition! */
var spans = table.getElementsByTagName("span");
var txt;

for(i in spans) {
    if(spans[i].getAttribute("class").contains("agt_span")){
        txt = spans[i].firstChild; /* a span should have only one child node, that contains the text */
    }
}
return txt;

Cette méthode n'est pas parfaite, car vous devez réellement scinder la spans[i].getAttribute("class").split(" ") sur les caractères d'espace et vérifier si ce tableau contient "agt_span".

Au fait: innerHTML n’est pas non plus un attribut DOM. Mais vous pouvez tout implémenter de manière compatible et flexible en utilisant W3C DOM et vous serez sûr d’écrire du code efficace et compatible.

Si les programmeurs js avaient utilisé les documents W3C et s'il n'y avait pas Internet Explorer pour enfreindre toutes ces règles ECMAScript et W3C, il n'y aurait jamais eu autant d'incompatibilités entre toutes ces versions de navigateur.

0
ikrabbe