【jQuery】要素のテキスト部分をコピーしたい

現在HTML,JavaScript(jQuery)を使ってアプリ開発をしています。

以下のような画面です。

「こぴー」ボタンを押すと背景１の文字列をすべてコピーし、背景２に追加します。（画像では１つしかコピーコピーされていませんがホントは全部コピーしたいです。）

今回背景１は文字列が５つですが、動的に増えると仮定してください。

この動的に増える文字列を背景２にコピーする方法が知りたいです。

ちなみに現状のコードは以下です。


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.box{
    background: white;
    border: solid 1px;
}
.box2{
    background: pink;
    border: solid 2px;
}
</style>
</head>
<body>
  <div style="height:100px; width:500px; background:aqua;" class="backBox1">背景１
      <span class="box">みかん</span>
      <span class="box">ぶどう</span>
      <span class="box">りんご</span>
      <span class="box">いちじく</span>
      <span class="box">さくらんぼ</span>
  </div>


  <div style="height:200px; width:200px; background:red; top:200px; position:absolute" class="backBox2">背景２
      <ul style="list-style:none;" id="boxList">
        <div style="display:none" id="dummyBox">
          <li><span class="box2">ダミー</span></li><!-- コピー用ダミー -->
        </div>
      </ul>
  </div>
  <input type="button" value="こぴー" id="copyBtn"/>
</body>
<script>
$(function(){

  $("#copyBtn").click(function(){

    //背景１のコピー元のテキストを取得
    var word = $('.box:first').text();

    //背景２に背景１テキストを追加したボックスを追加
    var copyBox = $('#dummyBox').children().clone();
    $(copyBox).find('.box2').text(word);
    $('#boxList').append(copyBox);

    //本当は背景１の全テキストを取得し、それを背景２ボックスに適用させ、全ボックスを一気に表示したい
  });
});
</script>
</html>

背景１と背景２では文字列ボックスの構造が少し違うので、テキスト部分だけを取得し、背景２の文字列ボックスに追加する方法を探しています。
.each() とか使ってうまくできないかなとか考えてはいるんですが、いい方法が思いつきません。

もしわかる方がいればよろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

こういうことでしょうか？

$(function(){
var cloneTg = $('#boxList');
$("#copyBtn").click(function(){//本当は$("#copyBtn")もキャッシュしておいたほうが良いかなと。
    $('.box').each(function(){
      var word = $(this).text();
      cloneTg.append('<li><span class="box2">'+word+'</span></li>');
    })
});

コピーボタンを押すと背景1のテキストを抽出しながら#boxListへli要素ごと出力。
というかたちにしてみました。
$('#dummyBox')以下の要素そのものがいりません。
（ulの直下にli以外の要素を置くのは構文的に誤り＋毎回cloneするのもかなりムダが多いためli+spanで出力）

※本当は毎回appendするより一度document.createDocumentFragment()等でノードをひとまとめにしてからappendChildするほうが良いです。（DOM操作を一回だけで済ませる）

JSを上記にした場合Htmlは

HTML
1<body>
2  <div style="height:100px; width:500px; background:aqua;" class="backBox1">背景１
3      <span class="box">みかん</span>
4      <span class="box">ぶどう</span>
5      <span class="box">りんご</span>
6      <span class="box">いちじく</span>
7      <span class="box">さくらんぼ</span>
8  </div>
9
10
11  <div style="height:200px; width:200px; background:red; top:200px; position:absolute" class="backBox2">背景２
12      <ul style="list-style:none;" id="boxList">
13      </ul>
14  </div>
15  <input type="button" value="こぴー" id="copyBtn"/>
16</body>

で。

投稿2016/04/18 18:01

編集2016/04/18 18:06

manabufukai

総合スコア700

k499778

2016/04/18 22:41 編集

回答ありがとうございます！シンプルでわかりやすく、また知らない知識も知れて大変勉強になりました。確かにできればDOM要素を一回だけで済ませれたほうがいいですよね。その理由としてはざっくりですが、負荷が大きくなるという認識で合っているでしょうか。影響としては、操作が重たくなってしまいがちになったりとかですかね？感謝します。

manabufukai

2016/04/19 06:58

恐縮です、ありがとうございます。 DOM操作はおっしゃるようにコストが高いものです。ただし、この言葉には若干の御幣もあります。ブラウザの仕組みを知ると理解がしやすいと思いますので、http://blog.anatoo.jp/entry/2015/10/14/174403などをご覧になるとイメージしやすいかと。今回で言えば、『レイアウト、ペインティング、レイヤー描画の回数を減らす＝負荷が軽くなる』ということです。パフォーマンスを考えたコードを書くと、何も考えずに書いたコードより案外肥大化する、ということも少なくありませんが、最終的に利用するエンドユーザーのことを考えれば、多少肥大化しても高効率で処理速度の速いコードを書いていくほうがユーザーにとっては嬉しいことかな、と考えています。

行動規範の内容に同意します

こんな感じでどうでしょう。「ついか」ボタンを押すと、果物が追加されるようにしてみました。

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
5<style>
6.box{
7    background: white;
8    border: solid 1px;
9}
10.box2{
11    background: pink;
12    border: solid 2px;
13}
14.boxList {
15    list-style: none;
16}
17</style>
18</head>
19<body>
20  <div style="height:100px; width:500px; background:aqua;" class="backBox1">背景１
21      <span class="box">みかん</span>
22      <span class="box">ぶどう</span>
23      <span class="box">りんご</span>
24      <span class="box">いちじく</span>
25      <span class="box">さくらんぼ</span>
26  </div>
27
28
29  <div style="height:200px; width:200px; background:red; top:200px; position:absolute" class="backBox2">背景２
30  </div>
31  <input type="button" value="こぴー" id="copyBtn" />
32  <input type="text" value="ぶどう" id="newFruit" />
33  <input type="button" value="ついか" id="appendBtn" />
34</body>
35<script>
36$(function() {
37  
38  $('#appendBtn').on('click', function() {
39    $('div.backBox1').append($('<span class="box">').append($('#newFruit').val()));
40  });
41  $('#copyBtn').on('click', function() {
42    var $list = $('<ul class="boxList">').appendTo($('div.backBox2'));
43    $('.box').each(function() {
44      $('<li><span class="box2">' + $(this).text() + '</span></li>').appendTo($list);
45    });
46  });
47});
48</script>
49</html>