Question

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

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>

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

1 个答案: