Objekt HTMLDivElement, Werte abrufen?

Question

Hallo, ich habe ein [Objekt HTMLDivElement] in dem Daten enthält, die ich verwenden möchte.

Ich verwende diese. Zum Beispiel this.innerHTML.

Meine Div Struktur sieht wie folgt zusammen:

<div class="hour"> <!-- <-- my Object referes to this div --> 
    <div class="time">2000</div> 
    <img class="weather-img" src="image/rain.png"> 
    <div class="temp">-10</div> 
</div> 

ich die Zeit und Temp Werte extrahieren möchte, ergo und -10.

ich die http://krook.org/jsdom/HTMLDivElement.html Dokumentation gelesen haben, aber kann nicht scheinen, eine schlanke Lösung für dieses Problem, meine beste Wette so weit zu finden hat innerHTML- gewesen aber fühlt sich an wie es sollte ein einfacher Weg sein. Jemand?

ANTWORT: var time = $ (this) .find ('. Time'). Text();

Answer 1

Einfach genug jQuery:

var time = $('.time', this).text(), 
    temp = $('.temp', this).text(); 

Ein wenig mehr Art und Weise, die in den Kommentaren erwähnt wurde, die auch funktioniert und zeigt ein wenig von Methoden in jQuery Verkettungs:

var time = $(this).find('.time').text(), 
    temp = $(this).find('.temp').text(); 

A mod bearbeitet mein Code, der möglicherweise nicht richtig ist, denn wenn es mehrere Elemente mit der Klasse time und temp auf der Seite gibt, könnten Sie die falschen Daten zurückbekommen. Mein Beispiel vor bearbeiten zeigt, wie Sie können Umfang die Abfrage besser:

var time = $('.hour .time').text(), 
    temp = $('.hour .temp').text(); 

jQuery.text:http://api.jquery.com/text/

Answer 2

Dieser Code wird Ihnen die Zeit und Temperatur-Werte als Strings erhalten mit yourDiv als Kontext:

var $div, 
    time, 
    temp; 
$div = $(yourDiv); //save the div as a jQuery collection 
        //(assuming `yourDiv` is the actual DOM node) 
time = $div 
    .find('.time') //from the div find the .time descendants 
    .text();  //get the text from the first .time descendant 
temp = $div 
    .find('.temp') //from the div find the .temp descendants 
    .text();  //get the text from the first .temp descendant 

Eine prägnante Art und Weise des Schreibens dieses wäre:

var time, 
    temp; 
time = $('.time', yourDiv).text(); 
temp = $('.temp', yourDiv).text(); 

In diesen beiden Beispielen habe ich explizit .time() über .html() ausgewählt, falls es HTML-Entitäten in den Werten gibt, in Ihrem Fall wird es keinen signifikanten Unterschied machen, aber es scheint, als ob Sie interessiert sind der analysierte Wert und nicht der HTML-Code.

Wenn Sie die Werte als Zahlen benötigen, wollen Sie den String-Wert in eine Zahl werfen:

time = Number(time); 

eine Abkürzung hierfür ist die einstelligen + Betreiber:

time = +time; 

So der endgültige Code wie folgt aussieht:

var time, 
    temp; 
time = +$('.time', yourDiv).text(); 
temp = +$('.temp', yourDiv).text(); 

Vor der Verwendung von time und temp Werte, achten Sie darauf, auf NaN zu überprüfen.

Answer 3

Wenn Sie jQuery nicht verwenden möchten, haben Sie die native getElementsByClassName().

var time = yourDOMobject.getElementsByClassName("time")[0].innerHTML; 

Wo yourDOMobject Ihre [Object HTMLDivElement] verweist.

Beispiel:http://jsfiddle.net/PhMs4/