jQuery：如何获取 Object HTMLDivElement 的值？

Question

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

我正在使用 this。例如，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>

我想要提取出时间和温度值，即2000和-10。

我一直在阅读http://krook.org/jsdom/HTMLDivElement.html的文档，但似乎找不到一个简洁的解决方案，目前我的最佳选择是使用innerHTML，但感觉应该有更简单的方法。有人能给予帮助吗？

答案：var time = $(this).find('.time').text();

- basickarl

Answer 1

如果您不想使用jQuery，可以使用原生的getElementsByClassName()方法。

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

当 yourDOMobject 引用你的 [Object HTMLDivElement] 时。

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

- Christofer Eliasson

---

我收到了错误消息: 未捕获的类型错误(Uncaught TypeError): 对象[object global]没有方法'getElementsByClassName'。 - basickarl

当我警告“this”时，我得到：[Object HTMLDivElement]。 - basickarl

@KarlMorrison，不要使用alert，请使用console.log或console.dir。在开发控制台中，您将获得更好的调试信息。 - zzzzBov

@KarlMorrison 添加了一个示例。 - Christofer Eliasson

@KarlMorrison 太好了，是的，我也做过。这是一个重要的“S”，因为它表示结果可能不止一个元素，而没有“S”的getElementById()则不会如此。 - Christofer Eliasson

Answer 2

使用jQuery很简单：

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

评论中提到的另一个可行的方法，同样可以展示jQuery中的方法链：

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

一个模块编辑了我的代码，这可能是不正确的，因为如果页面上有多个带有 time 和 temp 类的元素，你可能会得到错误的数据。我修改前的示例展示了如何更好地限定查询范围：

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

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

- Neil Kistner

---

啊，我表达不清楚，我正在使用“this”。例如： var time = $(this).$('.time').text(); 但是这似乎失败了！ - basickarl

@KarlMorrison，你的示例语法几乎正确，但需要更改为：var time = $(this).find('.time').text();。 - Neil Kistner

@NeilKistner 似乎返回一个空字符串 :/ 当使用 innerHTML 时，我收到 undefined - basickarl

@NeilKistner 我很抱歉，你是正确的，请将其作为答案发布，我会标记它 :) - basickarl

@KarlMorrison 不用担心。我更新了答案，现在你有三个例子可以参考。 :) - Neil Kistner

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。

- zzzzBov