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

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

ただいまの
回答率

87.37%

【jQuery】insertAfterした要素を元の場所に戻す方法

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,523

標題の通り、insertAfterしたDOMを元の場所に戻す良い方法はありますか?

サンプルコード

    <section>
      <div class="koko">
        <p>この下に移動してくる</p>
      </div>
      <div class="moveParent">
        <ul class="move">
          <li>移動したい(元に戻したい)</li>
          <li>移動したい(元に戻したい)</li>
        </ul>
      </div>
    </section>

  <script>
  $(function() {
  var winWidth = $(window).outerWidth();
  var navUA= navigator.userAgent;
  // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時
  if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) {
    $('.move').insertAfter('.koko p');
  } else {
    $('.moveParent').insertAfter('.koko'); 
  }
});

わからないこと

①現状のコードでも、元の場所に移動できますが
本来やりたいコードはもっと複雑なため
イメージとしては....
「移動 → 移動」ではなく「移動 → 復元」のようにできないかなと思っています。

②また、現状「.moveParent」を残していますが
できればSPの時(子要素がない時)はremoveしたいと思っています。
元の位置に移動する際に.wrapなどで処理すればいいかなと思っていますが
これも良い案があれば教えていただきたいです。

前提として、PCSP同じDOM構造で再現できないデザイン要件は避けるべきだとは
存じておりますが、またPCとSPでDOM自体を分けるなども検討しましたが
運用上こちらの方が手間が少なそうなため教えていただきたいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • jun68ykt

    2019/09/24 23:17

    ご質問①の要件を確認させてください。

    > 「移動 → 復元」のようにできないかなと思っています。

    とのことですが、復元とは、「元の状態に復旧させる」という意味だと思いますが、このご質問で、元の状態に相当するのが、ご質問に挙げられているHTMLであるという解釈でよいのでしょうか?

    あるいは、元の状態に相当するHTMLは、ご質問に挙げられているHTMLとは別のもので、その元の状態に相当するHTMLを回答することも、このご質問では求められているという解釈でよいのでしょうか?

    キャンセル

  • decteckaaaaaaaa

    2019/09/25 01:04

    ご確認ありがとうございます。

    >復元とは、「元の状態に復旧させる」という意味だと思いますが、このご質問で、元の状態に相当するのが、ご質問に挙げられているHTMLであるという解釈でよいのでしょうか?
    上記で間違いありません。

    >元の状態に相当するHTMLは、ご質問に挙げられているHTMLとは別のもの
    ややこしく失礼しました。
    実際に実装したいHTMLは別物になりますが、かなり複雑なため
    質問用に簡易的なHTMLサンプルを用意させていただきました。

    キャンセル

回答 1

0

.moveを.koko pの後ろに持ってきて.moveParentを削除する場合
逆の手順は.kokoの後ろにmoveParentクラスをつけたdivを新たにつくって
その中に.moveをappendすることになります

あとは、文字通り取っておいて戻す

<script>
$(function(){
  $('section').attr('data-html',function(){return escape($(this).html());});
  $('#idou').on('click',function(){
    console.log($('section').prop('outerHTML'));
    $('.koko').append($('.move'));
  });
  $('#modosu').on('click',function(){
    $('section').html(function(){return unescape($(this).data('html'));});
  });
});
</script>
<section>
test
<div class="koko">
<p>この下に移動してくる</p>
</div>
test
<div class="moveParent">
<ul class="move">
<li>移動したい1(元に戻したい)</li>
<li>移動したい2(元に戻したい)</li>
</ul>
</div>
test
</section>
<input type="button" value="移動" id="idou">
<input type="button" value="戻す" id="modosu">

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/28 17:55

    ご回答ありがとうございます!まさにこれがやりたかったです!

    浅識で恐縮なのですがスクリプト部分、処理の詳細を教えていただきたく、、、
    具体的にどういったことを行っているのでしょうか??

    $('section').attr('data-html',function(){
     return escape($(this).html()); 
    });
    ↑①section内のhtml情報を取得する?

    $('#idou').on('click',function(){
     console.log($('section').prop('outerHTML'));
    $('.koko').append($('.move'));
    });
    ↑②ここは単純に.kokoの後ろにmoveを移動させている

    $('#modosu').on('click',function(){
     $('section').html(function(){
      return unescape($(this).data('html'));
     });
    });
    ↑③元に戻す

    data-htmlを取得することで、元々のDOM情報を取得することができる。
    そして、escapeで保存することができる。
    unescapeすることで、escapeで保存したDOM情報を適用する

    という処理になるでしょうか?

    キャンセル

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

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

関連した質問

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