如果 ID 以前缀开头，则 JQuery 替换 html 元素内容

Posted 2023-05-07

【中文标题】如果 ID 以前缀开头，则 JQuery 替换 html 元素内容

【英文标题】：JQuery replace html element contents if ID begins with prefix

【发布时间】：2012-05-04 14:58:25

【问题描述】：

我正在寻找移动或复制 html 元素的内容。以前有人问过这个问题，我可以让 innerHTML() 或 Jquery 的 html() 方法工作，但我正在尝试自动化它。

如果元素的 ID 以 'rep_' 开头，则替换下划线后的元素内容。

所以，

<div id="rep_target">
Hello World.
</div>

将替换：

<div id="target">
Hrm it doesn't seem to work..
</div>​

我试过了：

$(document).ready(function() 
    $('[id^="rep_"]').html(function() 
        $(this).replaceAll($(this).replace('rep_', ''));
    );
);​

-和-

$(document).ready(function() 
    $('[id^="rep_"]').each(function() 
        $(this).replace('rep_', '').html($(this));
    );
​);​

似乎都不起作用，但是，这确实有效，只能手动：

var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;

相关，但这只是文字。 JQuery replace all text for element containing string in id

【问题讨论】：

替换从何而来？是否要转移替换（转移现有内容以替换目标）？还是克隆替换（复制现有内容并替换目标）？

常规 cmets：您在示例中使用了错误的 html：html 将字符串而不是函数作为参数。同样，您错误地使用了替换；如果你想改变一个属性（任何属性，包括“id”）你应该使用 attr。我认为后一种混淆来自于对 $(foo) 究竟返回什么的误解：它不是元素的 ID，也不是元素本身（或元素）。相反，它是元素的包装器，类似于 [element1, element2, ...]，但具有数组通常没有的额外方法。希望对您有所帮助。

我是 JS 菜鸟。我需要从 id="rep_target1" 获取格式化的 HTML 内容并替换或附加 id="target1" 的内容。基本上，搜索所有具有 id="rep_X" 的元素，然后查找并替换 id="X" 页面上有多个具有不同 X 值的实例...

【参考方案1】：

第一部分有两个基本选项：替换为 HTML 字符串，或替换为实际元素。

选项#1：HTML

$('#target').html($('#rep_target').html());

选项 #2：元素

$('#target').empty().append($('#rep_target').children());

如果您没有偏好，则后一种选择更好，因为浏览器不必重新构建所有 DOM 位（每当浏览器将 HTML 转换为元素时，它都需要工作，从而影响性能；选项 # 2 通过不让浏览器创建任何新元素来避免这种工作）。

这应该包括更换内部。您还想更改元素的 ID，并且只有一种方法（我知道）

var $this = $(this)
$this.attr($this.attr('id').replace('rep_', ''));

所以，把它们放在一起，就像这样：

$('[id^="rep_"]').each(function() 
    var $this = $(this)
    // Get the ID without the "rep_" part
    var nonRepId = $this.attr('id').replace('rep_', '');
    // Clear the nonRep element, then add all of the rep element's children to it
    $('#' + nonRepId).empty().append($this.children());

    // Alternatively you could also do:
    // $('#' + nonRepId).html($this.html());

    // Change the ID
    $this.attr(nonRepId);

    // If you're done with with the repId element, you may want to delete it:
    // $this.remove();
);

应该可以解决问题。希望对您有所帮助。

【讨论】：

作为旁注，您可能已经注意到这里的 html 和 attr 方法的模式：如果您在没有参数的情况下调用它们，您将返回值，如果您提供一个参数，您设置该参数作为值。这种模式也适用于 jQuery 中的许多其他方法（text、val 等）

这非常接近，但我需要动态执行选项#1。像这样：jsfiddle.net/SZUZt

我编辑了答案，以便更清楚地了解如何将这两个部分结合起来。我在组合版本中使用了选项 #2，因为它的性能会更好，但如果您愿意，可以轻松替换选项 #1。

你是天赐之物。太感谢了。我稍微调整了一下，但这成功了！

【参考方案2】：

使用attr方法获取id，去掉前缀，从中创建选择器，从元素中获取HTML代码，并从函数中返回：

$('[id^="rep_"]').html(function() 
  var id = $(this).attr('id');
  id = id.replace('rep_', '');
  var selector = '#' + id;
  return $(selector).html();
);

或者简单地说：

$('[id^="rep_"]').html(function() 
  return $('#' + $(this).attr('id').replace('rep_', '')).html();
);

【参考方案3】：

根据我的问题，我的理解是您想通过删除 re-_ 前缀来替换 id，然后更改该 div 的内容。这个脚本会做到这一点。

$(document).ready(function() 
    var items= $('[id^="rep_"]');
    $.each(items,function()
       var item=$(this);
       var currentid=item.attr("id");
       var newId= currentid.substring(4,currentid.length);
        item.attr("id",newId).html("This does not work");        
        alert("newid : "+newId);
    );    

);

工作示例：http://jsfiddle.net/eh3RL/13/