我正在动态创建无序列表。这将创建类似于以下的输出:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
<li>item 4</li>
<li>Item 5</li>
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
<li>item 6</li>
</ul>
我希望能够在创建它们后对它们进行排序,以便任何具有子列表的项目(例如项目 3 和项目 5)都将转到列表的顶部,输出如下:
<ul>
<li>item 3</li>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
<li>Item 5</li>
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
<li>item 1</li>
<li>item 2</li>
<li>item 4</li>
<li>item 6</li>
</ul>
我想我可以使用 jQuery 或 javascript .sort() 方法来做到这一点,但我不知道该去哪里。有什么建议吗?
最佳答案
首先,您应该将子列表放入其父元素中,并为列表指定一个类,如下所示:
<ul class="autoReorder">
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
<li>item 4</li>
<li>Item 5
<ul>
<li>Item 5.1</li>
<li>Item 5.2</li>
<li>Item 5.3</li>
</ul>
</li>
<li>item 6</li>
</ul>
然后在 jQuery 中,这是您的解决方案:
$(document).ready(function(){
$('ul.autoReorder').find('li ul').parent().prependTo('ul.autoReorder');
});
关于javascript - 使用 Javascript/jQuery 对无序列表进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28565629/