web-dev-qa-db-ja.com

jQueryを使用して子要素をある親から別の親に移動する方法

JQuery DataTables プラグインを使用しています。登録されたjavascriptの動作を失うことなく、検索ボックス（.dataTables_filter）とレコードの数を移動して、ドロップダウン（.dataTables_length）を親要素（.dataTables_wrapper）からページ上の別のdivに表示したいと思います。たとえば、検索ボックスには「キーアップ」イベントに関連付けられた関数があり、そのままにしておきたいと思います。

DOMは次のようになります。

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <div class="dataTables_length" id="table1_length">
      <select size="1" name="table1_length">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
    <div class="dataTables_filter" id="table1_filter">
      <input type="text" class="search">
    </div>
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

これは、移動後にDOMをどのように表示するかです。

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <div class="dataTables_filter" id="table1_filter">
    <input type="text" class="search">
  </div>
  <div class="dataTables_length" id="table1_length">
    <select size="1" name="table1_length">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

私は.append（）、. appendTo（）、. prepend（）、および.prependTo（）関数を見てきましたが、実際にはこれらに運がありませんでした。また、.parent（）および.parents（）関数も調べましたが、実行可能なソリューションをコーディングすることはできません。また、CSSを変更して要素が絶対に配置されるようにすることも検討しましたが、率直に言うと、ページ全体に流動的な要素が設定されており、これらの要素を新しい親にフロートさせたいのです。

これに関する助けは大歓迎です。

jqueryjquery-plugins
129
Jurgen

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

うまくいかない？私はそれがすべきだと思う...

37
Alex Lawford

Jageの答えは、イベントハンドラーとデータを含む要素を完全に削除するので、detach関数のおかげで、それを行わない簡単なソリューションを追加しています。

var element = $('#childNode').detach();
$('#parentNode').append(element);

編集：

Igor Mukhinは、以下のコメントでさらに短いバージョンを提案しました。

$("#childNode").detach().appendTo("#parentNode");

295
eric.itzhak

Detachは不要です。

答え（2013年現在）は簡単です。

$('#parentNode').append($('#childNode'));

http://api.jquery.com/append/ による

ページ上の要素を選択して、別の要素に挿入することもできます。

$（ '。container'）。append（$（ 'h2'））;

この方法で選択された要素がDOMの別の場所に挿入された場合、その要素はターゲットに移動されます（クローン化されません）。

154
JackArbiter

提供された回答に基づいて、私はこれを行うための簡単なプラグインを作成することにしました。

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

使用法：

$('#nodeToMove').moveTo('#newParent');
33
Jage