Question

你好，我有一个[Object HTMLDivElement]，其中包含我想要使用的数据。

我正在使用此。例如 this.innerHTML 。

我的Div结构如下所示：

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

我想提取时间和 temp 值，ergo 2000 和 -10 。

我一直在阅读http://krook.org/jsdom/HTMLDivElement.html文档，但似乎无法找到一个时髦的解决方案，到目前为止，我最好的选择是 innerHTML 但感觉应该更简单办法。任何人吗？

ANSWER：var time = $（this）.find（'。time'）。text（）;

Answer 1

如果您不想使用jQuery，则拥有本机getElementsByClassName()。

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

yourDOMobject引用您的[Object HTMLDivElement]。

示例： http://jsfiddle.net/PhMs4/

Answer 2

使用jQuery足够简单：

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

在评论中提到的一个更长的方式也起作用，并在jQuery中显示了一些链接方法：

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

一个mod编辑了我的代码，这可能不对，因为如果页面上有多个time和temp类的元素，你可能会找回错误的数据。编辑前的示例显示了如何更好地确定查询范围：

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

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

Answer 3

此代码将使用yourDiv作为上下文将时间和临时值作为字符串获取：

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

更简洁的写作方式是：

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

在这两个示例中，我明确选择.time()而不是.html()，以防值中有任何HTML实体，在您的情况下，它不会产生显着差异，但似乎好像你对解析后的值而不是原始HTML感兴趣。

如果您需要将值作为数字，则需要将字符串值转换为数字：

time = Number(time);

这是一元+运算符的快捷方式：

time = +time;

所以最终的代码如下：

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

在使用time和temp值之前，请务必检查NaN。

jQuery：对象HTMLDivElement，获取值？

3 个答案: