更新

Question

我想替换元素子元素的所有文本。

这样，我替换II的所有文本子项。也许还有其他标记。不仅<ul>和<li>。

I
II
1. A
2. 乙
  - 1
  - 2
  - 3
3. C
III

我想要这样：

I
II
1. 测试：A
2. 测试：B
  - 测试：1
  - 测试：2
  - 测试：3
3. 测试：C
III

我尝试编码，但我失败了。

为什么.find('*')失败了？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

<!--I want get like this:-->
<!--<ul class="level-1">-->
    <!--<li class="item-i">I</li>-->
    <!--<li class="item-ii">II-->
        <!--<ul class="level-2">-->
            <!--<li class="item-a">test: A</li>-->
            <!--<li class="item-b">test: B-->
                <!--<ul class="level-3">-->
                    <!--<li class="item-1">test: 1</li>-->
                    <!--<li class="item-2">test: 2</li>-->
                    <!--<li class="item-3">test: 3</li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li class="item-c">test: C</li>-->
        <!--</ul>-->
    <!--</li>-->
    <!--<li class="item-iii">III</li>-->
<!--</ul>-->
<script>
    $('ul.level-2').find('*').filter(function () {
        return this.nodeType === 3
    }).each(function () {
        this.textContent = 'test:' + this.textContent;
    });
//    $('ul.level-2').children().filter(function () {
//        return this.nodeType === 3
//    }).each(function () {
//        this.textContent = 'test:' + this.textContent;
//    });
</script>
</body>
</html>

我无法修改此HTML，因为它不是我编写的代码。所以我用js来修改它。

感谢！

更新

我解决了，谢谢任何人！

文字节点不是Elements，因此find('*')无法捕获它。我发现contents()可以捕获它。这是我的代码

    $('ul.level-2').find('*').contents().filter(function () {
        return this.nodeType === 3 && !!this.textContent.trim();
    }).each(function () {
        this.textContent = 'test'+this.textContent
    });

Answer 1

$('.level-2').find('li').toArray().forEach(function(e){
    e.innerHTML = 'test ' + e.innerHTML;
});

$('.level-3').find('li').toArray().forEach(function(e){
    e.innerHTML = 'test ' + e.innerHTML;
});

Answer 2

你需要的是递归：

function recursivelyChangeText($node, transformFunc) {
  var children = $node.children()
  if(children.length > 0) {
    for(var i = 0; i < children.length; i++) { 
      recursivelyChangeText($(children[i]), transformFunc)
    }
  } else {
    $node.text(transformFunc($node.text()))
  }
}

recursivelyChangeText($('ul.level-2'), function(text) {
  return `test: ${text}`
})

这是一个codepen： SO Answer - Recursively Change Dom Content with jQuery由马特布莱克（@mattblackdev）CodePen发表。

jQuery如何替换元素子元素的文本节点

更新

2 个答案: