jquery - 选择标签中的部分文本

Question

DOM结构如下所示(现有网站...无法修改它):

<table>
<tr><td>
<br><hr size="1"><strong>some heading 1</strong><br>
<br>some text 1<br>

<br><hr size="1"><strong>some heading 2</strong><br>
<br>some text 2<br>
</td></tr>
</table>

我想操纵它，使其看起来像这样

<table>
<tr><td>
<br><hr size="1"><strong>some heading 1</strong><br>
<br>some text 1<br>
</td></tr>
<tr><td>
<br><hr size="1"><strong>some heading 2</strong><br>
<br>some text 2<br>
</td></tr>
</table>

使用发布的解决方案 here ，我能够获取 hr、strong、br 标签并将它们移动到新的 td 元素中。但是，我无法获取“some text 1”，因为它直接包含在 td 中，并且在 td 上使用 .text() 会给我“some text 1”和“some text 2”。

有什么想法吗？

Answer 1

您可以使用 .contents() 收集所有子节点，包括文本节点。以下代码搜索第二个 hr(为了稳健)并将前面的 br 和后面的所有内容移动到新创建的 td。我已经在 google chrome 中测试过它。

$('table tr td').each(function() {
    var firtHrSeen = false;
    var indexOfSecondHr = -1;
    var allChildren = $(this).contents();
    allChildren.each(function(index) {
        if ($(this).is('hr')) {
            if (firtHrSeen) {
                indexOfSecondHr = index;
                return false; // break out of each()
            } else {
                firtHrSeen = true;
            }
        }
    });

    if (indexOfSecondHr != -1) {
        var newTd = ($('<tr><td></td></tr>').insertAfter(this.parentNode))[0].firstChild;
        allChildren.slice(indexOfSecondHr - 1).each(function(index) {
            newTd.appendChild(this);
        });
    } else {
        // not found. something went wrong
    }
});