Javascript jQuery .html() 函数不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31306778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .html() function not working
提问by user2352119
I have the following mark up code
我有以下标记代码
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th>Back</th>
</tr>
<tr>
<td class="runner-row runner-back">1.98</td>
<td class="runner-row runner-back">1.99</td>
<td class="runner-row runner-back runner-back-active">2.00</td>
</tr>
</table>
</body>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</html>
I use the following Javascript code to change the values of my "runner-row" elements
我使用以下 Javascript 代码来更改我的“runner-row”元素的值
window.onload = function() {
var gElemRunners = $(".runner-row");
gElemRunners[0].innerHTML = 1.5;
gElemRunners[1].innerHTML = 1.6;
gElemRunners[2].innerHTML = 1.7;
}
This code works absolutely fine and the values update properly when the window has loaded. However, the following code does not work.
这段代码工作得很好，当窗口加载时，值会正确更新。但是，以下代码不起作用。
window.onload = function() {
var gElemRunners = $(".runner-row");
gElemRunners[0].html(1.5);
gElemRunners[1].html(1.6);
gElemRunners[2].html(1.7);
}
I get the following error in DevConsole
我在 DevConsole 中收到以下错误
Uncaught TypeError: $(...)[0].html is not a function
I get the same error even if I change the .html to .text or .val. Please help me with this because I can't seem to understand where the problem lies.
即使我将 .html 更改为 .text 或 .val，我也会收到同样的错误。请帮我解决这个问题，因为我似乎无法理解问题出在哪里。
回答by The_Black_Smurf
$(...)[0]will return the DOM element. If you want to use a jquery function, it has to be on a jquery selector object. If you want to get the jquery selector for a specific index, use the eq function:
$(...)[0]将返回 DOM 元素。如果要使用 jquery 函数，它必须位于 jquery 选择器对象上。如果要获取特定索引的 jquery 选择器，请使用eq 函数：
$('selection').eq(0).html();
回答by Bikas
When you read from jQuery object gElemRunners, you're getting HTMLElement and not the jQuery object.
You have to wrap the HTMLElement again to jQuery object before using any of it's function.
当您从 jQuery object 读取时gElemRunners，您将获得 HTMLElement 而不是 jQuery 对象。在使用它的任何功能之前，您必须再次将 HTMLElement 包装到 jQuery 对象。
Try this instead (also there can be multiple better ways, I'm just suggesting one here) -
试试这个（也可以有多种更好的方法，我只是在这里建议一种）-
$(gElemRunners[0]).html(1.5)
...
回答by Bikas
As already pointed out gElemRunners[0]returns the DOM API, which doesn't have a html method.
正如已经指出的gElemRunners[0]返回 DOM API，它没有 html 方法。
What you can use is the jQuery.each() methodto iterate over your elements, or you can use gElemRunners.eq(0).html().
您可以使用jQuery.each() 方法来迭代您的元素，或者您可以使用gElemRunners.eq(0).html().
回答by Mindastic
The problem is that you are trying to use a jQuery method in a non-jQuery object, because when you get the first element gElemRunners[0], it is returning the DOMElement itself, not the jQuery object.
问题是您试图在非 jQuery 对象中使用 jQuery 方法，因为当您获取第一个 element 时gElemRunners[0]，它返回的是 DOMElement 本身，而不是 jQuery 对象。
Using jQuery, you could do:
使用 jQuery，您可以执行以下操作：
var gElemRunners = $(".runner-row");
gElemRunners.eq(0).html(1.5);
gElemRunners.eq(1).html(1.6);
gElemRunners.eq(2).html(1.7);
