-1

我收到一个响应 ajax 请求的 HTML 字符串。它是一个带有许多分层子节点的大型 HTML 字符串。

我使用解析它

jQuery.parseHTML();

将其转换为 DOM。现在我想更改具有特定 ID 的子节点的内容，然后重新生成 HTML。

问题是当我使用 jQuery 方法选择一个 dom 元素进行更改时，它会返回该特定节点和

jQuery.html()

只需将该节点更改为 HTML。

我尝试过以下代码示例

 var parsedHTML = jQuery.parseHTML( 'htmlstring' );
 jQuery(parsedHTML).find('#element-id').text('changed text').html();

或者

jQuery(parsedHTML).filter('#element-id').text('changed text').html();

问题是它只返回 span#element-id 并且当应用 html() 时，生成的 html 只有 span 文本。

如何生成完整的 html 并更改特定节点？

4

1 回答 1

-1

不要链接（或者如果你这样做，请使用end，但实际上更简单，只是不这样做）。通过链接，你说你只想要链中最后一组元素的 HTML：

var elements = jQuery(parsedHTML);
elements.filter('#element-id').text('changed text');
var html = elements.html();

但elements.html()只会给你第一个元素的内部HTML。要再次获取完整的 HTML 字符串，您需要获取每个元素的外部HTML 并将它们连接在一起：

var html = elements.map(function() {
  return this.outerHTML;
}).get().join("");

请注意，您的使用filter假定元素位于 HTML 字符串的顶层。如果是，那就太好了。如果不是，你会想要find。

示例filter：

var parsedHTML = jQuery.parseHTML(
  "<span>no change</span>" +
  "<span id='element-id'>change me</span>" +
  "<span>no change</span>"
);
var elements = jQuery(parsedHTML);
elements.filter('#element-id').text('changed text');
console.log(elements.map(function() {
  return this.outerHTML;
}).get().join(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

示例find：

var parsedHTML = jQuery.parseHTML(
  "<span>no change</span>" +
  "<div>the span is in here<span id='element-id'>change me</span></div>" +
  "<span>no change</span>"
);
var elements = jQuery(parsedHTML);
elements.find('#element-id').text('changed text');
console.log(elements.map(function() {
  return this.outerHTML;
}).get().join(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2017-03-10T18:09:39.197 回答