Question

如何将具有特定类别或某个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行代码来手动维护以复制内容。我如何通过＆＃34;代码示例＆＃34;来浏览所有div？将它们的内容复制到具有匹配ID的div。所有源div都将具有id =＆＃34; source-（example-identifier）＆＃34;并且所有目标div都将具有id =＆＃34; target-（example-identifier）＆＃34;。我想如果代码将遍历所有ID为＆＃34;来源 - ＆＃34;

的项目，则不需要课程。

Answer 1

我会老去并且坚持使用getElementsByClassName()但是因为问题是如何定位div将具有id =＆＃34; target-（example-identifier）你可以使用querySelectorAll()

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

有关 querySelectorAll()

的更多信息

返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

因此输出与使用getElementsByClassName()

非常相似

如果您有任何疑问，请在下面留言，我会尽快回复。

如何使用类和ID定位特定标记？

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

您仍然需要循环遍历争用，就像按类名返回元素一样，但此查询选择器只会返回类名为code-example且包含source-example-的div元素{1}}属性。

＆＃13;

id

＆＃13;

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

＆＃13;

我希望这会有所帮助。快乐的编码！

Answer 2

如何使用“code-example”类复制所有div 他们的内容为具有匹配ID的div

假设code-example元素的索引与目标的索引相同，请尝试

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 3

您可以使用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 4

我意识到检查页面上的哪些示例并获取其源ID的内容更有意义。我在代码标签中添加了另一个类＆＃34; target-example＆＃34;

这里是javascript（jquery可能会让它看起来更漂亮）

override func prepareForReuse(){
    // save data here an then....
    super.prepareForReuse()
}

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

4 个答案: