具有jQuery 3.2.1的UL和LI运行错误 [英] UL and LI with jQuery 3.2.1 running error

问题描述

我有这个工作链接，可以显示我想要的结果

但是，当我将代码插入Dreamweaver cc 2018时，它不起作用. 我使用的是3.2.1版本的jquery jquery-3.2.1.js.

However when I insert my code to Dreamweaver cc 2018 it doesn't work. I use the 3.2.1 version of jquery jquery-3.2.1.js.

在我的jsfiddle中，选择项按字母顺序排序，而在我的页面中则没有.

In my jsfiddle the selection is sorted alphabetically while in my page it doesn't.

var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
mylist.empty().append(listitems);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>h</li>
<li>c</li>
<li>i</li>
<li>e</li>
<li>b</li>
<li>l</li>
<li>j</li>
<li>f</li>
<li>a</li>
<li>g</li>
<li>d</li>
<li>k</li>
<li>n</li>
<li>m</li>
</ul>

我想念什么?

推荐答案

正如我在我的评论中提到的，您的问题可能是您的html渲染和javascript执行的时间.您可以尝试将javascript代码插入准备就绪的文档中.

As I mentioned to my comment you problem probably is the timing of your html rendering and the javascript execution. You could try inserting your javascript code inside a document ready like this.

$( document ).ready(function() {
    var mylist = $('#list');
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
    })
    mylist.empty().append(listitems);
});

这篇关于具有jQuery 3.2.1的UL和LI运行错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！