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

我希望移动或复制HTML元素的内容。以前有人问过这个问题，我可以让innerHTML（）或Jquery的html（）方法工作，但我正在尝试将其自动化

如果一个元素的ID以“rep_”开头，则将该元素的内容替换为下划线之后的内容

所以

-及-

两者似乎都不起作用，但是，这确实起作用，只有手动操作：

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

相关，但这只是文本。

---

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

选项1：HTML

选项2：要素

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

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

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

所以，把它们放在一起，比如：

$('[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();
});

---

我们应该做到这一点。希望有帮助。

使用

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();
});

---

根据我的问题，我的理解是，您希望通过删除re-u前缀来替换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);
    });    

});

---

工作样本：

替换品来自哪里？是否要转移替换（转移现有内容以替换目标）？或克隆替换（复制现有内容并替换目标）？一般说明：示例中使用html是错误的：html以字符串而不是函数作为参数。同样地，您正在错误地使用replace；如果要更改属性（任何属性，包括“id”），应使用attr。我认为后一种混淆源于误解$（foo）返回的确切内容：它不是元素的ID，也不是元素本身（或元素）。相反，它是一个围绕元素的包装器，类似于[element1，element2，…]，但具有数组通常不具备的额外方法。希望能帮上忙，我是个疯子。我需要从id=“rep_target1”获取格式化的HTML内容，并替换或附加id=“target1”的内容。基本上，搜索具有id=“rep_X”的所有元素，然后查找并替换id=“X”页面上有多个具有不同X值的实例…作为旁注，您可能已经注意到html和attr方法都有一种模式：如果您调用它们时不带参数，则返回值，如果提供参数，将该参数设置为值。此模式也适用于jQuery中的许多其他方法（text、val等）。这非常接近，但我需要动态执行选项1。这样：我编辑了答案，以便更清楚地说明如何将这两部分结合起来。我在组合版本中使用了选项#2，因为它的性能会更好，但如果您愿意，可以很容易地替换选项#1。您真是天赐良机。非常感谢你。我只是稍微调整了一下，但这成功了！

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

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();
});

$('[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();
});

$(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);
    });    

});