循环 HTML 变量并用内容替换 span

Question

我有一个包含 HTML.

的变量

var html = '<p><span id="variable:7" class="variable-source" title="variable:TEXT_CONTAINER">DATA</span> This is a variable</p>'+
'<p><span id="input:10.New Input 2" class="input-source" title="New Screen; New Input 2">DATA</span> This is a input source</p>'+
'<p>Testing</p>';

我正在尝试循环所有元素并替换为跨度特定日期。因此，任何具有 variable-source 的 class 的跨度都需要用特定日期替换，input-source.

也是如此

我尝试使用以下方法：

$('span', html).replaceWith(function () {
    var id = $(this).attr('id');
    // this returns the correct id
    //calculations go here
    var value = 'testing';
    return value
});

输出如下：

testing This is a variable

所有的段落标签都被删除了，似乎在第一段之后就停止了。我在这里缺少什么吗？如果需要，我可以 post 更多代码或解释更多内容。

提前致谢。

Answer 1

您需要创建一个 html 对象引用，否则您将无法获得对更新内容的引用。然后在做替换操作后从创建的jQuery对象中获取更新内容

var html = '<p><span id="variable:7" class="variable-source" title="variable:TEXT_CONTAINER">DATA</span> This is a variable</p>' +
  '<p><span id="input:10.New Input 2" class="input-source" title="New Screen; New Input 2">DATA</span> This is a input source</p>' +
  '<p>Testing</p>';

var $html = $('<div></div>', {
  html: html
});

$html.find('span.variable-source').replaceWith(function() {
  var id = this.id;
  // this returns the correct id
  //calculations go here
  var value = 'replaced variable for: ' + id;
  return value
});
$html.find('span.input-source').replaceWith(function() {
  var id = this.id;
  // this returns the correct id
  //calculations go here
  var value = 'replaced input for: ' + id;
  return value
});

var result = $html.html();
$('#result').text(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

循环 HTML 变量并用内容替换 span

Loop around HTML variable and replace spans with content

html

javascript

jquery

replacewith