将具有特定 id 的 div 复制到具有相关 id 的目标

Question

如何将具有特定 class 或某个 ID 开头的所有 div 的内容复制到一堆具有相关 ID 的 div？我找到的例子没有经过多次复制。我有一个工作正常的解决方案，但我不想用 id 调用每个副本，而是想让逻辑更好。

这是我现在拥有的。

HTML（把手模板）

<!-- the id comes from handlebar content. There are many like this -->

<pre><code id="target-example-01" class='language-markup'></code></pre>

<!-- this content is put to place once handlebars has rendered the page  -->
<div id="code-examples" style="display: none;">
  <div class='code-example' id="source-example-01">
    this is my a code example... there are many like me...
  </div>
</div>

Javascript

var source = document.getElementById('source-example-01').innerHTML;
var target = document.getElementById('target-example-01');
if (target) target.innerHTML=source;

这工作正常，但我有 100 个示例，所以我不希望手动维护 300 行代码只是为了复制内容。如何使用 "code-example" class 遍历所有 div，并将它们的内容复制到具有匹配 ID 的 div。所有源 div 的 id="source-(example-identifier)"，所有目标 div 的 id="target-(example-identifier)"。我想如果代码遍历 ID 以 "source-"

开头的所有项目，则不需要 class

Answer 1

How do I go through all the divs with "code-example" class and copy their content to divs with a matching id

假设code-example个元素的index与targets相同，则try

var allCodeExamples = document.getElementsByClassName( "code-example" );
for ( var counter = 0; counter < allCodeExamples.length ; counter++ )
{
   var index = ("0" + counter).slice( -2 );
   var target = document.getElementById( "target-example-" + index );
   target.innerHTML = allCodeExamples[counter].innerHTML;
}

Answer 2

您可以为此使用数据属性 jquery:

<!-- the id comes from handlebar content. There are many like this -->

<pre><code id="target-example-01" class='language-markup'></code></pre>

<!-- this content is put to place once handlebars has rendered the page  -->
<div id="code-examples" style="display: none;">
  <div class='code-example' id="source-example-01" data-target="#target-example-01">
    this is my a code example... there are many like me...
  </div>
</div>

$(function(){
   var targetId;

   $(".code-example").each(function(){
      targetId = $(this).attr("data-target");
      $(targetId).html($(this).html());
   });
});

Answer 3

我会老派并坚持使用 getElementsByClassName() 但由于问题是如何定位 divs 将具有 id="target-(example-identifier) 你可以使用 querySelectorAll()

document.querySelectorAll('div[id^="source-example-"]')

有关querySelectorAll()

的更多信息

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

所以输出非常像使用 getElementsByClassName()

有什么问题请在下方留言，我会尽快回复。

How to target a specific tag with a class and id?

document.querySelectorAll('div.code-example[id^="source-example-"]')

您仍然需要像对 class 名称的 returning 元素一样遍历竞争，但此查询选择器将仅 return div 元素class 名称 code-example 并在 id 属性中包含 source-example-。

function QuerySelector() {
var Selector=document.querySelectorAll('div.code-example[id^="source-example-"]');
for(var i=0; i<Selector.length; i++){
alert(Selector[i].innerHTML);
}
}

<div class="code-example" id="source-example-01">Content Line One. - with class and id </div>
<div class="code-example">Content Line Two. - with correct class but no ID</div>
<div class="code-example" id="source-example-02">Content Line Three. - with class and id </div>
<button onclick="QuerySelector()">Get</button>

希望对您有所帮助。编码愉快！

Answer 4

我意识到检查页面上有哪些示例并获取其源 ID 的内容更有意义。我在代码标签 "target-example"

中添加了另一个 class

这是 javascript（jquery 可能会更好看）

var examples = document.getElementsByClassName('target-example');
var i;
var id;
for (i = 0; i < examples.length; i++) {
    id = examples[i].id;
    var source = document.getElementById('source-'+id).innerHTML;
    if (source) examples[i].innerHTML=source;
}

将具有特定 id 的 div 复制到具有相关 id 的目标

Copy divs with certain id's to targets with related id's

javascript

copy

handlebars.js