javascript - 每次更新 jQuery 中的 DOM 引用

Question

我正在修改 $.each() 循环内的元素 innerHTML 属性。现在，如果我的元素堆栈包含我更新 innerHTML 的元素的子元素，则该子元素的 DOM 引用将会丢失。

例子:

$(function(){
    $stack = $(".myelement, .myelement *");
    $stack.each(function(){
        var $this = $(this);
        var element = $(this)[0];
        console.log(element.innerHTML = element.innerHTML + " modified");
    });
});

fiddle :https://jsfiddle.net/b0ux0v5e/

我首先修改了 .myelement 的 innerHTML。这包括 child p。因此，此元素的 DOM 引用丢失，并且不会附加“已修改”。

如果不构建为元素创建唯一选择器并在每个循环中重新捕获它的函数，如何解决这种情况？

注意:我并不是要求专门将一些文本附加到节点。这只是一个例子。在实际项目中，我正在替换 innerHTML 中的文本。

Answer 1

我猜你想修改文本内容。在这种情况下，您想了解 .contents() 方法，该方法还可以让您遍历文本节点:

$(function() {
  $(".myelement").contents().each(function(i, el) {
    el.textContent += " 'modified'";
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myelement">
  I am the myelement
  <p>
    Hello world
  </p></div>