jQuery divsテキストを2つのコンテナに追加します

Question

特定のdivのテキストを取得し、それらをスパンで囲み、それらを2つの異なるコンテナに追加したいとします。私はできるだけ効率的にそれをやろうとしていますが、私はものを過度に複製していると思います。初めに

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：各ループの各反復で.append()を動作しますが、呼び出す

<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> 

私の最初の試みは、次のとおりです。

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

あなたはただあなたが、アレイを構築し、文字列に変換し、それをあなたのdivに追加するjoin()を使用するmap()を使用することができ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>

を使用することができます。

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>