知道为什么这行不通吗?
我正在尝试获取它,以便每次有一个类为“insert_name”的元素时,该名称就会从表中打印出来。
你能帮我做更高级的选择吗(例如只使用“client-profile”类中第一个 tr 的数据?
谢谢!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color"><a href="/profile">Matthew Tester</a>
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();
最佳答案
问题出在您的节点选择上。当您按类名选择时,它会返回一个元素数组。由于您只查找具有该类名的 div,因此访问第一个索引以引用它。
var node = document.getElementsByClassName('insert_name')[0];
编辑
要迭代所有节点,您可以采用这种方法
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
或者,由于已经包含了 jQuery,您可以删除正文的 onload 事件并只使用它
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
为确保这仅作用于 client-profile
类,选择器将是
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());
关于javascript - 使用 JQuery 选择内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23919323/