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

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

ただいまの
回答率

87.93%

jQueryで取得したオブジェクトの置き換え

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 794

score 358

前提・実現したいこと

jQueryで取得したオブジェクトの一部の要素を置き換えしたいです。
※以下は「bar1」を「bar2」に置き換えしたい場合です。

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
        <textarea name="bar1_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>

このようなHTMLがあった場合に「複製」ボタンを押すと

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
    <textarea name="bar1_area"></textarea>
    </div>
    <div class="foo">
        <input type="text" name="bar2" value="">
        <input type="text" name="bar2_text" value="">
        <textarea name="bar2_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>


となるようにしたいです。

試したこと

replaceメソッドを使ってみましたが、TypeErrorがでて動きませんでした。
同じものをコピーするまでは以下でできたのですが・・・

$('.btn').click(function(){
    var dom = $('.hoge .foo:last').clone(true);
    dom.insertAfter('.hoge .foo:last');
    // 以下だとエラー
    // dom.replace('bar1', 'bar2').insertAfter('.hoge .foo:last');
});

■エラーコード
Uncaught TypeError: dom.replace is not a function
at HTMLSpanElement.<anonymous> (hoge.php)
at HTMLSpanElement.dispatch (jquery.min.js:3)
at HTMLSpanElement.r.handle (jquery.min.js:3)

良い方法があれば、ご教授いただきたいです。
よろしくお願いします。

回答および質問ありがとうございました。 どちらの方法を採用するか、または参考にさせて頂いて解決するか現在はわかりませんので、先にご回答いただいた方をベストアンサーにさせて頂きました。 ありがとうございました。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/08/06 17:06

    質問編集して追記いただければと

    キャンセル

  • m.ts10806

    2019/08/06 17:16

    dom.insertAfter('.hoge .foo:last');
    ↑こちらはエラー出てないのですか?

    キャンセル

  • rjunakc

    2019/08/06 17:53

    エラーは出ていないです。

    キャンセル

回答 2

checkベストアンサー

+2

こんな感じで

<script>
$(function(){
  $('.btn').on('click',function(){
    var c=$('.hoge:eq(0)').clone();
    var bar='bar'+($('.hoge').length+1).toString();
    c.find('input:eq(0)').attr('name',bar).val("");
    c.find('input:eq(1)').attr('name',bar+'_text').val("");
    c.find('textarea').attr('name',bar+'_area').val("");
    $(this).before(c);
  });
});
</script>

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
        <textarea name="bar1_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>
</script>

bar固定+数字を個別指定せずに処理

<script>
$(function(){
  $('.btn').on('click',function(){
    var c=$('.hoge:eq(0)').clone();
    var bar='bar'+($('.hoge').length+1).toString();
    c.find('[name]').filter(function(){
      return $(this).attr('name').match(/bar[0-9]+/);
    }).each(function(){
      var name=$(this).attr('name');
      name=name.replace(/bar[0-9]+/,bar);
      $(this).attr('name',name);
    });
    $(this).before(c);
  });
});
</script>

<div class="hoge">
    <div class="foo">
        <input type="text" name="bar1" value="">
        <input type="text" name="bar1_text" value="">
        <input type="text" name="xxx_bar1_xxx" value="">
        <input type="text" name="dummy" value="">
        <textarea name="bar1_area"></textarea>
    </div>
</div>
<a href="#" class="btn">複製</a>
</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/06 17:34

    ・削除は現在考えていません。

    キャンセル

  • 2019/08/06 17:43

    調整しました

    キャンセル

  • 2019/08/06 17:58

    ありがとうございます。
    色々参考になりました。
    もう一人の回答者の方の回答も参考にしながら、要件を満たすように作ってみます。
    色々とご教授下さりありがとうございました。

    キャンセル

+2

地道に変換するしかないです

    dom.find('[name^="bar"]').each(function(_index, element) {
      element.name = element.name.replace(/bar(\d+)/, function(_m, p) {
        return 'bar' + (parseInt(p, 10) + 1).toString();
      });
    });


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

-- 全属性対象版追記

    dom.find('*').each(function(_index, element) {
      $.each(element.attributes, function(_index, attribute) {
        element.setAttribute(attribute.name, attribute.value.replace(/bar(\d+)/, function(_m, p) {
          return 'bar' + (parseInt(p, 10) + 1).toString();
        }));
      });
    });


https://developer.mozilla.org/ja/docs/Web/API/Element/attributes

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/06 17:36

    ありがとうございます。
    「name^="bar"」以外にも「id=""」や「data-xxx=""」なども置き換えしたいのですが、そのパターン分ご提示のコードを書く必要がありますかね・・・やっぱり。

    キャンセル

  • 2019/08/06 17:59

    ありがとうございます。
    色々参考になりました。
    もう一人の回答者の方の回答も参考にしながら、要件を満たすように作ってみます。
    色々とご教授下さりありがとうございました。

    キャンセル

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

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

関連した質問

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