質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • jQuery

    6897questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4146questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 5

投稿

  • 評価
  • クリップ 2
  • VIEW 18K+

k499778

score 500

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

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

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

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

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

イメージ説明

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <style>
    .aaa {
      width: 150px;
      height: 50px;
      background-color: #EFE;
      border: solid 1px #CCC;
      position: absolute;
    }

    .ddd {
      width: 150px;
      height: 50px;
      background-color: pink;
      border: solid 1px pink;
      position: absolute;
    }
  </style>
</head>

<body>
  <label class="aaa">
    <span class="bbb"></span>
    <input type="hidden" class="ccc">りんご
  </label>
  <br>
  <br>
  <br>
  <label class="aaa">
    <span class="bbb"></span>
    <input type="hidden" class="ccc">いちご
  </label>
  <br>
  <br>
  <br>
  <label class="aaa">
    <span class="bbb"></span>
    <input type="hidden" class="ccc">ぶどう
  </label>
  <br>
  <br>
  <br>
  <label class="ddd">
    <span class="bbb"></span>
    <input type="hidden" class="ccc">りんご
  </label>
  <script>
    $(function() {
      $(".aaa").on("click", function() {
        var txt = $(this).text();
        //↓悩んでいるところ↓
        //$(".ddd").text(txt);  //中のタグが消える
        //$(".ddd").append(txt); //どんどん文字が増える。消し方がわからない
      });
    });
  </script>
</body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+3

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

jQuery(function (jQuery) {
  jQuery('.aaa').on('click', function () {
    this.ownerDocument.querySelector('.ddd').lastChild.data = this.lastChild.data;
  });
});

Re: k499778 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/22 23:17

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

    回答していただきありがとうございます!

    キャンセル

  • 2016/03/23 00:14 編集

    すいません。

    もしお時間ございましたら1つお伺いしたいのですが。
    lastchildの後の「data」が何を意味しているのか知りたいと思ってます。
    今ずっと調べているのですが、うまく見つけることができません。

    そのdataが何を指しているか知りたいのでもしよければ、参考サイトなどを教えていただけないでしょうか?あとは自分で調べますので。

    ---------------------------------------------------------------------------------------------------

    ここに載っていました。
    http://akiok-jp.hatenablog.com/entry/2013/04/21/172058

    e.lastChild.data;
    で最後の子要素を指すのですね。

    ひとまずこのセットで覚えておきます。
    失礼しました。

    キャンセル

  • 2016/03/23 00: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

    キャンセル

  • 2016/03/23 12:54

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

    キャンセル

checkベストアンサー

+1

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

<label class="ddd">
  <span class="bbb"></span>
  <input type="hidden" class="ccc"><span class="result">りんご</span>
</label>

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/22 22:51

    ngyukiさん
    回答有り難うございます。
    ただできればHTMLはタグを増やさず、現状のHTMLのままで
    jQueryで実現する方法を知りたいのです。

    classやidを増やすくらいはいいのですが、DOMの構造は崩さずにできればしたいのです。

    キャンセル

  • 2016/03/22 22:53

    追記しました

    キャンセル

  • 2016/03/22 23:06

    追記回答ありがとうございます。
    ノードタイプは今まで使ったことがなかったので勉強になりました。
    filterメソッドと一緒に使うことでこのような処理ができるようになるんですね。

    今調べていたんですが
    contents()で$(".ddd")内のタグを対象にし、
    filterメソッドでnodeTypeが3(テキストノード)のものに対してのみremove()をする
    という処理をしているのですね。

    参考にさせていただきます。学ばせていただきました。ありがとうございました。

    キャンセル

  • 2016/03/22 23:25

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

    キャンセル

  • 2016/03/22 23:39

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

    キャンセル

  • 2016/03/23 00:05 編集

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

    キャンセル

+1

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

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


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


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/22 22:53

    unauさん、回答有り難うございます。

    そうですね。できればタグ付けを行わずに
    jQuery側でやりたいことを実現したいと思っています。

    キャンセル

  • 2016/03/22 23:11

    返答ありがとうございます。
    htmlメソッドでspanタグやinputタグを再度生成したりするという感じでしょうか。
    それも考えたのですが、もう少し上手くやる方法を探していました。

    filterメソッドとノードタイプを使うことでやりたいことを実現できたので、今回はそちらを参考にさせてもらいたいと思います。

    前回さながら今回も回答していただき感謝しています。本当にありがとうございます。

    キャンセル

+1

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

$(function() {
  var resultArea = $("<span class='result' />").appendTo($(".ddd"));
  $(".aaa").on("click", function() {
    resultArea.text($(this).text());
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/22 23:13

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

    キャンセル

+1

下記でできました。

$(function() {
    var $a = $('.aaa'),
        $d = $('.ddd');

      $a.on("click", function() {
        var txt = $.trim($(this).text()),
            currentHtml = $d.html(),
            currentText = $.trim($d.text()),
            afterHtml = currentHtml.replace(currentText, txt);

        $d.html(afterHtml); // 文字だけ差し替え
      });
    });

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

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

<div>
  <label class="aaa">りんご</label>
  <span class="bbb"></span>
  <input type="hidden" class="ccc">
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/23 00:01

    yamato_hikawaさん
    回答有り難うございます!

    なるほど!HTMLを作って、中のテキストだけリプレイスするのですね!
    その発想と書き方は知りませんでした。
    参考にさせていただきます。

    構造としてもやはり自然なのは文字部分をタグで囲ってしまって
    それをtext()なりを使って書き換える方法のようですね。

    勉強になります。ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6897questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4146questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。