jquery - 並べ替えスタイル付きのリスト

Question

動的に作成される次のようなリストがあります。

<ul id="Bucket-1" class="list1" data-listidx="11">
<li><div style="cursor: pointer;">BYBO2</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">FURG4</div></li>
<li><div style="cursor: pointer;">HCLB8</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">KVQF1</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">LYPI6</div></li>
<li><div style="cursor: pointer;">MLET3</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">MPZM9</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">RFHP7</div></li>
<li style="display: none;"><div style="cursor: pointer; display: none;">TEAR5</div></li>
</ul>

<li>上記のjqueryによるソートを適用する必要が<li>ありますが、含まれていませんstyle="display:none"

Answer 1

の代わりに css クラスを使用でき、この投稿 cssdisplay:noneで簡単なソリューションを使用できます。

.visible-li{}
.hidden-li{display:none;}

html:

<ul id="Bucket-1" class="list1" data-listidx="11">
<li class="visible-li"><div style="cursor: pointer;">BYBO2</div></li>
<li class="hidden-li"><div style="cursor: pointer;">FURG4</div></li>
<li class="visible-li"><div style="cursor: pointer;">ACLB8</div></li>
<li class="hidden-li"><div style="cursor: pointer;">KVQF1</div></li>
<li class="hidden-li"><div style="cursor: pointer;">LYPI6</div></li>
<li class="visible-li"><div style="cursor: pointer;">MLET3</div></li>
<li class="hidden-li"><div style="cursor: pointer;">MPZM9</div></li>
<li class="hidden-li"><div style="cursor: pointer;">RFHP7</div></li>
<li class="hidden-li"><div style="cursor: pointer;">TEAR5</div></li>
</ul>

最後に、推奨される投稿でソリューションを使用します

JSFIDDLEでそれを見る