javascript 如果 ID 以前缀开头，则 JQuery 替换 html 元素内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10290019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery replace html element contents if ID begins with prefix
提问by Caleb Roseland
I am looking to move or copy the contents of an HTML element. This has been asked before and I can get innerHTML() or Jquery's html() method to work, but I am trying to automate it.
我希望移动或复制 HTML 元素的内容。以前有人问过这个问题，我可以让 innerHTML() 或 Jquery 的 html() 方法工作，但我正在尝试使其自动化。
If an element's ID begins with 'rep_', replace the contents of the element after the underscore.
如果元素的 ID 以“rep_”开头，则替换下划线后的元素内容。
So,
所以，
<div id="rep_target">
Hello World.
</div>
would replace:
将替换：
<div id="target">
Hrm it doesn't seem to work..
</div>?
I've tried:
我试过了：
$(document).ready(function() {
$('[id^="rep_"]').html(function() {
$(this).replaceAll($(this).replace('rep_', ''));
});
});?
-and-
-和-
$(document).ready(function() {
$('[id^="rep_"]').each(function() {
$(this).replace('rep_', '').html($(this));
});
?});?
Neither seem to work, however, this does work, only manual:
两者似乎都不起作用，但是，这确实有效，只有手动：
var target = document.getElementById('rep_target').innerHTML;
document.getElementById('target').innerHTML = target;
Related, but this is only text. JQuery replace all text for element containing string in id
相关，但这只是文本。 JQuery 替换 id 中包含字符串的元素的所有文本
回答by machineghost
You have two basic options for the first part: replace with an HTML string, or replace with actual elements.
第一部分有两个基本选项：替换为 HTML 字符串，或替换为实际元素。
Option #1: HTML
选项#1：HTML
$('#target').html($('#rep_target').html());
Option #2: Elements
选项#2：元素
$('#target').empty().append($('#rep_target').children());
If you have no preference, the latter option is better, as the browser won't have to re-construct all the DOM bits (whenever the browser turns HTML in to elements, it takes work and thus affects performance; option #2 avoids that work by not making the browser create any new elements).
如果你没有偏好，后一种选择更好，因为浏览器不必重新构建所有的 DOM 位（每当浏览器将 HTML 转换为元素时，它需要工作，从而影响性能；选项 #2 避免了这种情况通过不让浏览器创建任何新元素来工作）。
That should cover replacing the insides. You also want to change the ID of the element, and that has only one way (that I know)
这应该包括更换内部。您还想更改元素的 ID，只有一种方法（我知道）
var $this = $(this)
$this.attr($this.attr('id').replace('rep_', ''));
So, putting it all together, something like:
所以，把它们放在一起，就像：
$('[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();
});
should do the trick. Hope that helps.
应该做的伎俩。希望有帮助。
回答by Guffa
Get the id using the attrmethod, remove the prefix, create a selector from it, get the HTML code from the element, and return it from the function:
使用attr方法获取 id ，删除前缀，从中创建一个选择器，从元素中获取 HTML 代码，然后从函数中返回它：
$('[id^="rep_"]').html(function() {
var id = $(this).attr('id');
id = id.replace('rep_', '');
var selector = '#' + id;
return $(selector).html();
});
Or simply:
或者干脆：
$('[id^="rep_"]').html(function() {
return $('#' + $(this).attr('id').replace('rep_', '')).html();
});
回答by Shyju
From my question, my understanding is that you want to replace the id by removing the re-_ prefix and then change the content of that div. This script will do that.
从我的问题来看，我的理解是您想通过删除 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);
});
});
Working Sample : http://jsfiddle.net/eh3RL/13/
工作示例：http: //jsfiddle.net/eh3RL/13/
