Question

我有这个HTML

<html>
    <head></head>
<body>
    <div class="para">
        <ins>A computer is a</ins> popular <del>new</del><ins> device</ins>
    </div>

    <div class="para">
        <ins>Stored programs</ins><del>required the re-wiring and re-structuring of the machine.</del>
    </div>
    <div class="para">
        <ins>Integrated </ins>new<del>circuits</del><ins>System </ins>
    </div>
</body>
</html>

我想获取所有的ins，以及相应的para类的文本节点，并将其包装到新的ins标签中，并将del标签添加到新的del标签，如下所示

<html> 
<head></head>
<body>
    <div class="para">
        <ins>A computer is a popular</ins><del>new</del><ins> device</ins>
    </div>

    <div class="para">
        <ins>Stored programs</ins><del>required the re-wiring and re-structuring of the machine.</del>
    </div>
    <div class="para">
        <ins>Integrated new</ins><del>circuits</del><ins>System </ins>
    </div>
</body>
</html>

我尝试了以下代码

var unit = $('.para');
$.each(unit, function(){
   var nodes = $(this).find('ins');
})

帮我解决这个问题

Answer 1

您可以使用.each()，.contents()，.filter()来获取#text元素中.para等于当前.parentElement的{{1}}个节点1}}元素; .para将选定的.appendTo()个节点附加到当前#text元素中的第一个ins元素

＆＃13;

.para

＆＃13;

$(".para").each(function(index, element) {
  $(this).contents().filter(function() {
    return this.nodeName === "#text" && this.parentElement === element
  }).appendTo($("ins:first", element))
})

＆＃13;

Answer 2

您应该可以使用document.querySelectorAll('.para')来获取它们的数组。然后以他们的孩子为目标循环。

但这不是jquery，不确定你是否已经开始使用jquery或者对某些香草感到满意。

找到所有INS，文本节点换行到INS标签，并找到带有新DEL TAG各自类名的del

2 个答案: