【jQuery】labelの中の文字列だけを変更したい

現在以下のコードをjQueryを使って実装しています。
「緑のボックスをクリックするとピンクのボックスにその文字が入る」ように作りたいと思っています。

そこでtextメソッドを使ったのですが、そうするとlabelタグの間のspanタグやinputタグが消えてしまいます
。

次にappendメソッドを使ったのですが、文字だけを消す方法がわからず、どんどんピンクのボックスに文字が増えていってしまいます。

labelタグの中のタグを消さずに文字だけを変更する方法が知りたいです。

もしわかる方がいればお願いします。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
7  <style>
8    .aaa {
9      width: 150px;
10      height: 50px;
11      background-color: #EFE;
12      border: solid 1px #CCC;
13      position: absolute;
14    }
15
16    .ddd {
17      width: 150px;
18      height: 50px;
19      background-color: pink;
20      border: solid 1px pink;
21      position: absolute;
22    }
23  </style>
24</head>
25
26<body>
27  <label class="aaa">
28    <span class="bbb"></span>
29    <input type="hidden" class="ccc">りんご
30  </label>
31  <br>
32  <br>
33  <br>
34  <label class="aaa">
35    <span class="bbb"></span>
36    <input type="hidden" class="ccc">いちご
37  </label>
38  <br>
39  <br>
40  <br>
41  <label class="aaa">
42    <span class="bbb"></span>
43    <input type="hidden" class="ccc">ぶどう
44  </label>
45  <br>
46  <br>
47  <br>
48  <label class="ddd">
49    <span class="bbb"></span>
50    <input type="hidden" class="ccc">りんご
51  </label>
52  <script>
53    $(function() {
54      $(".aaa").on("click", function() {
55        var txt = $(this).text();
56        //↓悩んでいるところ↓
57        //$(".ddd").text(txt);  //中のタグが消える
58        //$(".ddd").append(txt); //どんどん文字が増える。消し方がわからない
59      });
60    });
61  </script>
62</body>
63
64</html>
65

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

回答5件

テキストノードの data プロパティを編集してはどうでしょうか。

JavaScript
1jQuery(function (jQuery) {
2  jQuery('.aaa').on('click', function () {
3    this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
4  });
5});

Re: k499778 さん

投稿2016/03/22 14:06

think49

総合スコア18162

k499778

2016/03/22 14:17

think49さんすごい！できてます。テキストノードのdataプロパティを編集したことがなかったので、まだよくわかっていませんが、すごくシンプルなような気がします。もう少し調べてみます。回答していただきありがとうございます！

k499778

2016/03/22 15:26 編集

すいません。もしお時間ございましたら１つお伺いしたいのですが。 lastchildの後の「data」が何を意味しているのか知りたいと思ってます。今ずっと調べているのですが、うまく見つけることができません。そのdataが何を指しているか知りたいのでもしよければ、参考サイトなどを教えていただけないでしょうか？あとは自分で調べますので。 --------------------------------------------------------------------------------------------------- ここに載っていました。 http://akiok-jp.hatenablog.com/entry/2013/04/21/172058 e.lastChild.data; で最後の子要素を指すのですね。ひとまずこのセットで覚えておきます。失礼しました。

think49

2016/03/22 15:27 編集

this.lastChild はテキストノード(TEXT_NODE)です。テキストノードは Interface Text, Interface CharacterData を継承する([[Prototype]] に持つ)為、CharacterData.prototype.data を使用できます。 http://www2u.biglobe.ne.jp/~oz-07ams/2003/Core/CharacterData.html https://developer.mozilla.org/en-US/docs/Web/API/CharacterData

k499778

2016/03/23 03:54

回答ありがとうございます！

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

下記でできました。

JavaScript
1 $(function() {
2    var $a = $('.aaa'),
3        $d = $('.ddd');
4   
5      $a.on("click", function() {
6        var txt = $.trim($(this).text()),
7            currentHtml = $d.html(),
8            currentText = $.trim($d.text()),
9            afterHtml = currentHtml.replace(currentText, txt);
10        
11        $d.html(afterHtml); // 文字だけ差し替え
12      });
13    });

ただ、現状の構造がどういう意図でそうしているのかよくわかりませんが、
ベストな構造とも言い切れませんので、構造そのものを見直しても良いと思います。

↓ラベル内をテキストのみにした例。

html
1<div>
2  <label class="aaa">りんご</label>
3  <span class="bbb"></span>
4  <input type="hidden" class="ccc">
5</div>
6

投稿2016/03/22 14:57

yamato_hikawa

総合スコア2092

k499778

2016/03/22 15:01

yamato_hikawaさん回答有り難うございます！なるほど！HTMLを作って、中のテキストだけリプレイスするのですね！その発想と書き方は知りませんでした。参考にさせていただきます。構造としてもやはり自然なのは文字部分をタグで囲ってしまってそれをtext()なりを使って書き換える方法のようですね。勉強になります。ありがとうございます。

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

JavaScript側でタグ付けするのも無しですか？

javascript
1$(function() {
2  var resultArea = $("<span class='result' />").appendTo($(".ddd"));
3  $(".aaa").on("click", function() {
4    resultArea.text($(this).text());
5  });
6});

投稿2016/03/22 14:08

root_jp

総合スコア4666

k499778

2016/03/22 14:13

roop_jpさん回答有り難うございます。そうですね。js側でもできればタグ付けせずに実現したいと思っています。

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

いろいろやり方はあると思いますが、挿入されるポイントに明示的にタグをつけておくのが自然だと思います。

html
1  <label class="ddd">
2    <span class="bbb"></span>
3    <input type="hidden" class="ccc"><p id="target">りんご</p>
4  </label>

こういうタグ付けができないケースなのでしょうか。

他の方への回答へのコメントを拝見したので追記。

DOM 構造を変えたくないなら、あんまりやりたくないですが、$('label.ddd').html() で取得した html ソースをごにょごにょして newHTML を作り、$('label.ddd').html(newHTML) で書き戻すんじゃないでしょうか。

投稿2016/03/22 13:51

編集2016/03/22 13:56

unau

総合スコア2468

k499778

2016/03/22 13:53

unauさん、回答有り難うございます。そうですね。できればタグ付けを行わずに jQuery側でやりたいことを実現したいと思っています。

k499778

2016/03/22 14:11

返答ありがとうございます。 htmlメソッドでspanタグやinputタグを再度生成したりするという感じでしょうか。それも考えたのですが、もう少し上手くやる方法を探していました。 filterメソッドとノードタイプを使うことでやりたいことを実現できたので、今回はそちらを参考にさせてもらいたいと思います。前回さながら今回も回答していただき感謝しています。本当にありがとうございます。

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

ベストアンサー

普通ならテキストの部分に <span> とかを設けて、

html
1<label class="ddd">
2  <span class="bbb"></span>
3  <input type="hidden" class="ccc"><span class="result">りんご</span>
4</label>

次のように text() を使うと思います。

javascript
1$(".ddd .result").text(txt);

次のようにテキストノードを全部削除すれば、追加したテキストを削除することができます。

javascript
1$(".ddd").contents().filter(function(){ return this.nodeType === 3 }).remove();
2$(".ddd").append(txt);

投稿2016/03/22 13:46

編集2016/03/22 13:53

ngyuki

総合スコア4514

k499778

2016/03/22 13:51

ngyukiさん回答有り難うございます。ただできればHTMLはタグを増やさず、現状のHTMLのままで jQueryで実現する方法を知りたいのです。 classやidを増やすくらいはいいのですが、DOMの構造は崩さずにできればしたいのです。

ngyuki

2016/03/22 13:53

追記しました

k499778

2016/03/22 14:06

追記回答ありがとうございます。ノードタイプは今まで使ったことがなかったので勉強になりました。 filterメソッドと一緒に使うことでこのような処理ができるようになるんですね。今調べていたんですが contents()で$(".ddd")内のタグを対象にし、 filterメソッドでnodeTypeが３(テキストノード)のものに対してのみremove()をするという処理をしているのですね。参考にさせていただきます。学ばせていただきました。ありがとうございました。

root_jp

2016/03/22 14:25

nodeType は 3 と書くのではなく、Node.TEXT_NODE とするとマジックナンバーが回避できて可読性が上がります。

think49

2016/03/22 14:39

this.nodeType === 3 と書くのは IE8- を意識してそうですね。 Node.TEXT_NODE が IE いくつから使えるようになったのかは自信がないのですが、その書き方なら this.TEXT_NODE でもOKです。

k499778

2016/03/22 15:06 編集

なるほど〜ありがとうございます。

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

あなたの回答