jquery - 替换 <br> 后的文字

Question

我有以下html格式

<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 1
        </span>
        <br>
        by Ahmed 1
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 2
        </span>
        <br>
        by Ahmed 2
    </td>
</tr>
<tr>
    <td width="80%" style="padding-bottom: 3px" class="ms-vb">
        <span class="ms-announcementtitle">
            title is here 3
        </span>
        <br>
        by Ahmed 3
    </td>
</tr>

我想替换 <br> 之后的文字为“由管理员创建”，即 by Ahmed 1 --> Created by Admin等等……

Answer 1

与其操纵父对象的 HTML 并导致表格的大部分内容被重新解析，不如使用结合了 jQuery 和普通 javascript 的这段代码直接查找并替换该文本:

$(".ms-announcementtitle").each(function() {
    $(this).nextAll("br").get(0).nextSibling.nodeValue = "Created By Admin";
});

这会找到 class="ms-announcementtitle" 的跨度, 然后找到 <br>标记在它后面，然后获取它的 DOM 节点并获取将成为文本节点的 nextSibling，最后直接更改它的文本。

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/z5zVT/ .

jQuery 处理文本节点的函数不多，而且因为你要替换的文本没有包裹在它自己的容器中，所以最好用 jQuery 找到区域，然后使用普通的 javascript 操作来处理直接文本节点而不是修改更高级别容器的 innerHTML，这会导致容器中的所有内容都被重新解析。

如果您为此控制 HTML，最好将所需的文本包装在 <span class="creator"> 中。然后您可以使用类似这样的更直接的方式来定位该跨度的内容:

 $(".creator").text("Created by Admin");