javascript - 使用 JQuery 选择内容

标签 javascript jquery html

知道为什么这行不通吗?

http://jsfiddle.net/zk4pc/2/

我正在尝试获取它,以便每次有一个类为“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();
})();

最佳答案

jsFiddle Demo

问题出在您的节点选择上。当您按类名选择时,它会返回一个元素数组。由于您只查找具有该类名的 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 事件并只使用它

jsFiddle Demo

$(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/

相关文章:

javascript - JQuery CSS 方法不会改变高度元素

javascript - 删除 html 字符串中除 <a> 之外的所有标签

jquery slider 改变 body 背景

javascript - 如何为 pjax-standalone 添加淡入/淡出效果?

javascript - 在 jQuery 中悬停时处理 CSS 更改(用户选择的颜色)

javascript - Firebase HTML 表单

javascript - Canvas 在浏览器之间是否有不同的抗锯齿功能?

javascript - 这个函数可以递归或更干净地重写吗?

html - 将图像设置为背景

javascript - 从匹配数组的嵌套数组中获取名称