jQuery 将 div 文本附加到两个容器中

Question

我想获取某些 div 的文本，将它们包含在一个 span 中并将它们附加到两个不同的容器中。我试图尽可能高效地做到这一点，但我认为我过于复杂了。

HTML 开头：

<div id="container">
  <h3 class="text">aaa</h3>
  <h3 class="text">bbb</h3>
  <h3 class="text">ccc</h3>
</div>
<div id="appendHere1"></div>
<div id="appendHere2"></div>

HTML到底应该怎么写：

<div id="container">
  <h3 class="text">aaa</h3>
  <h3 class="text">bbb</h3>
  <h3 class="text">ccc</h3>
</div>
<div id="appendHere1">
  <span class="someClass">aaa</span>
  <span class="someClass">bbb</span>
  <span class="someClass">ccc</span>
</div>
<div id="appendHere2">
  <span class="someClass">aaa</span>
  <span class="someClass">bbb</span>
  <span class="someClass">ccc</span>
</div>

我第一次尝试在每个循环的每次迭代中调用.append() 是：

var $appendHere1 = $('#appendHere1');
var $appendHere2 = $('#appendHere2');

$('h3.text').each(function() {

  $appendHere1.add($appendHere2)
    .append('<span class="someClass">' + $(this).text() + '</span>');

});

我用jQuery.map()尝试了不同的尝试：

// Doesn't work:

var text = $('h3.text').map(function() {
  return '<span class="someClass">' + $(this).text() + '</span>';
})

$('#appendHere1, #appendHere2').append(text);

// Doesn't work:

var $text = $();

$('h3.text').each(function() {
   $text.append('<span class="someClass">' + $(this).text() + '</span>');
})

$('#appendHere1, #appendHere2').append($text);

// Doesn't work:

var text = $('h3.text').map(function() {
  return $(this).text();
})

$('#appendHere1, #appendHere2').append(text.each(function(){
    return '<span class="someClass">' + this + '</span>';
}));

我应该如何使用 jQuery.map() 或 jQuery.each() 以有效的方式实现这一点？

Answer 1

你可以只使用each()循环和append()

$('#container > h3').each(function() {
  $("#appendHere1, #appendHere2").append($('<span class="someClass"></span>').text($(this).text()))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h3 class="text">aaa</h3>
  <h3 class="text">bbb</h3>
  <h3 class="text">ccc</h3>
</div>
<div id="appendHere1"></div>
<div id="appendHere2"></div>

您也可以使用map() 构建一个数组，然后使用join() 将其转换为字符串并将其附加到您的 div 中。

var html = $('#container > h3').map(function() {
  return '<span class="someClass">'+ $(this).text()+'</span>'
}).get()

$("#appendHere1, #appendHere2").html(html.join(''))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h3 class="text">aaa</h3>
  <h3 class="text">bbb</h3>
  <h3 class="text">ccc</h3>
</div>
<div id="appendHere1"></div>
<div id="appendHere2"></div>