BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQueryを使って子要素を親から子へ移動させる方法【重複あり

2022-02-18 18:33:56

質問

私はjQueryを使用しています。 データテーブル プラグインを使用しています。検索ボックス（.dataTables_filter）と表示レコード数（.dataTables_length）を親要素（.dataTables_wrapper）からページ上の別の div に移動したいのですが、登録済みの javascript 動作が失われることはありません。例えば、検索ボックスには 'keyup' イベントに関連する関数があり、それをそのまま維持したいのです。

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()関数も見てみましたが、実行可能な解決策をコード化することができないようです。しかし、率直に言って、このページは流動的な要素で構成されており、これらの要素を新しい親にフロートさせたいと考えています。

何かお手伝いできることがあれば、ぜひお願いします。

解決方法は？

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

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します