如果ID以prefix开头,则JQuery替换html元素内容

时间:2012-04-24 00:05:33

标签: javascript jquery html replace innerhtml

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

3 个答案:

答案 0 :(得分:2)

第一部分有两个基本选项:用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();
});

应该做的伎俩。希望有所帮助。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

从我的问题来看,我的理解是你想通过删除重新_前缀来替换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/