Javascript uzyskać wewnętrzną tekst HTML rozpiętości wg nazwy klasy

Question

Jest to podstawowy format kodu tabela jest zawarty w div o nazwie

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

muszę być w stanie uzyskać co tekst jest zawarty w przedziale klasa, w tym przypadku muszę wyciągnąć tekst "Mój kod", a następnie dodać go do tablicy. Dodanie tekstu do tablicy nie jest sprawą łatwą, ale nie mogę zrozumieć, jak przeciągnąć tekst. Bez względu na to, co próbuję, nie mogę uzyskać niczego poza "nieokreśloną" wartością.

Jak uzyskać wartość tekstową Wewnętrzny HTML dla zakresu według nazwy klasy?

Pierwsze pytanie rozwiązane dzięki!

Drugie pytanie rozwinąć pierwszy:

<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> 

Powiedzmy mam select id "agt_drp" i chcę uzyskać tekst span class. Czy istnieje jakiś sposób, aby to zrobić?

Answer 1

Jquery:

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

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

Answer 2

w waniliowym javascript, można użyć getElementsByClassName():

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

https://jsfiddle.net/ky38esoo/

Wskazówka indeks za metody .

Answer 3

JQuery:

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

Czysta JavaScript (należy określić pozycję swojej klasie elementu: [0] dostać pierwszy):

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

Jeśli masz wielokrotności elementy z tej klasy , możesz zapętlić:

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

Answer 4

Wygląda na to, że getElementsByClassName być wspierany przez wszystkie główne przeglądarki, które są teraz argumentami za jej użyciem. Aby kod był kompatybilny i użyteczny, lepiej używaj standardu W3C DOM Level 3 Core. Dokument IDL nie opisuje tam takiej metody!

Więc proszę użyć

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; 

Ta metoda nie jest doskonała, jak to faktycznie trzeba podzielić spans[i].getAttribute("class").split(" ") na przestrzeni znaków i sprawdzić, czy ta tablica zawiera „agt_span”.

Przy okazji: innerHTML nie jest też atrybutem DOM. Ale możesz zaimplementować wszystko w kompatybilny i elastyczny sposób używając W3C DOM, a na pewno napiszesz efektywny i kompatybilny kod.

Jeśli programiści js użyli Dokumentów W3C i gdyby nie było żadnego Internet Explorera, który złamałby wszystkie reguły ECMAScript i W3C, nigdy nie byłoby tak wielu niezgodności między wszystkimi tymi wersjami przeglądarki.