Q&A
回答ありがとうございます！
返信遅れてすみません。
どちらのやり方も子要素を入れ替えているのでそもそも問題ないですね。
ともあれこんな書き方もできるのですね。参考になりました！
scriptの実行タイミング？の理解がいまいちなので質問します
やりたいこと
jQueryのsortableを使ってリストの並び替えを行う。
その後リストの並びをリセットするためにinnerHTMLを使ってリストを初期状態で上書きする。
概要
（プログラム例
javascript
1<head> 2<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 3<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 4<script> 5 $(function(){ 6 $("#sortable").sortable(); 7 }); 8 var a='<ul id="sortable"><li>1</li><li>2</li><li>3</li></ul>'; 9</script> 10</head> 11 12<body> 13<div> 14<ul id="sortable"> 15 <li>1</li> 16 <li>2</li> 17 <li>3</li> 18</ul> 19</div> 20<input type="button" value="reset" onclick="document.getElementsByTagName('div')[0].innerHTML=a"> 21<input type="button" value="sortable" onclick='$(function(){$("#sortable").sortable();})'> 22 23</body>
ごそっと<ul>...</ul>をresetボタンを押してリセットした場合、並び替えができなくなります。
対策
- 根本的な対策として、そもそも<ul>下の<li>の部分だけ書き換えれば良いということはわかっています。
- 別のやり方として試しに、sortableボタンを作って、押したら下記scriptを走らせるようにしたら、並び替えができるようになりました。
javascript
1$(function(){ 2 $("#sortable").sortable(); 3 });
質問
仮に<ul>...</ul>全体を書き換える場合、2. の対策以外にスマートなやり方はありますか？
回答2件
0
jQueryあまり詳しくないのでもっと良いやり方あると思いますが、以下のようにresetでやりたい事を関数に切り出せばとりあえず実現はできます。
function hoge() { document.getElementsByTagName('div')[0].innerHTML='<ul id="sortable"><li>1</li><li>2</li><li>3</li></ul>' $("#sortable").sortable() }
<input type="button" value="reset" onclick="hoge()">
※タイトルにjQueryとありますが、sortableはjQuery UIの機能です。
投稿2019/08/13 08:29
編集2019/08/13 08:30
総合スコア1376
0
Sortable は親だけではなく子にも mousedown 等がつくので単に削除してしまうと壊れます。
ノードの入れ替えが面倒であればいったん破棄して再設定です。
JavaScript
1 $('#sortable').sortable('destroy').html('<li>1</li><li>2</li><li>3</li>').sortable();
https://api.jqueryui.com/sortable/#method-destroy
Sortable 適用後の clone を保持して置き換えることも考えられます。
JavaScript
1var clone = $('#sortable > *').clone(true);
jQuery
1 $('#sortable > *').each(function(index, element) { 2 $(element).replaceWith(clone.eq(index).clone(true)); 3 });
投稿2019/08/14 07:44
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/13 08:43