JQueryがチェックイン時にリスト内の項目を移動する

Question

チェックボックスをチェックすると、チェックボックスをリストの先頭に移動するコードを探していました。

私は素晴らしいスタートを与えたMove checkboxes on checked jQueryを見つけましたが、今はさらなる問題に取り組んでいます。

アイテムをこの<ul>リストに追加しますが、<input>セクションのない標準アイテムだけを追加すると、コード全体が機能しなくなります。

私が見たことのない簡単な回避策はありますか？私はちょうどJQueryを使い始めているので、私は正直言って苦労しています。

Answer 1

前の質問のコードを使用する。 liの中に入力があるかどうかを調べるために "typeof"を追加することができます。これにより問題は回避され、静的になります。

var list = $("ul"), 
 
     origOrder = list.children(); 
 
    
 
    list.on("click", ":checkbox", function() { 
 
     var i, checked = document.createDocumentFragment(), 
 
      unchecked = document.createDocumentFragment(); 
 
     for (i = 0; i < origOrder.length; i++) { 
 
      if (typeof(origOrder[i].getElementsByTagName("input")[0]) != "undefined" && origOrder[i].getElementsByTagName("input")[0].checked) { 
 
       checked.appendChild(origOrder[i]); 
 
      } else { 
 
       unchecked.appendChild(origOrder[i]); 
 
      } 
 
     } 
 
     list.append(checked).append(unchecked); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<ul> 
 
<li><label><input type="checkbox" id="one" />One</label></li> 
 
<li><label><input type="checkbox" id="two" />Two</label></li> 
 
<li><label><input type="checkbox" id="three" />Three</label></li> 
 
<li><label><input type="checkbox" id="four" />Four</label></li> 
 
<li><label><input type="checkbox" id="five" />Five</label></li> 
 
<li><p>Hello World!</p></li> 
 
</ul>