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

Question

我想移动或复制 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

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

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