如何使这个 jquery 1.11 脚本在 jquery 3.3 中工作答案

【问题标题】：How to make THIS jquery 1.11 script work in jquery 3.3如何使这个 jquery 1.11 脚本在 jquery 3.3 中工作
【发布时间】：2019-06-05 02:41:14
【问题描述】：

我的代码基于来自Javascript - Retrieve names of files in a folder 的示例代码，使用 jquery-1.11.2 显示文件列表，但使用 jquery-3.3.1 不显示任何内容，并且 ol 标记显示项目符号列表而不是编号列表。

我创建了以下代码并将其放在我的 CENTOS 6/Apache 服务器上。它完美地显示了文件列表，但错误地将其格式化为项目符号列表而不是编号列表。另外，当我尝试使用 jquery 3.3.1 运行它时，代码什么也没有显示。

在https://twirlers.bobhurt.com/showfiles.html查看工作版本。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Show Files</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div id='fileNames'></div>
    </div>
</body>

<!--
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-->
    <script src="js/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>//<![CDATA[
    $(window).load(function(){
        var $filedata = [
            [".pdf", "Printable PDF Template Files"],
            [".svg", "Scalable Vector Graphic Source Files for Editing in Inkscape"]
            ];
        var $folder = "assets/";

            $(document).ready(function(){

                $.ajax({
                    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
                    url: 'assets/',
                    success: function (data) {
                        console.log(data);
                        $("#fileNames").html('<br>');
                        for (var i = 0; i < $filedata.length; i++) {
                            $("#fileNames").append('<h3>'+ $filedata[i][1]+'</h3>');
                            $("#fileNames").append('<ol>');
                            $(data).find("a:contains(" + $filedata[i][0] + ")").each(function () {
                                $("#fileNames").append( '<li><a href="'+$folder+$(this).text()+'">'+$(this).text()+'</a></li>');
                            });
                            $("#fileNames").append('</ol>');
                        }
                    }
                });

            });
    });
    //]]>
    </script>

我希望使用 jquery 3.3.1 的代码显示文件列表，但它什么也没显示，也没有错误消息。

我希望对文件列表进行编号，因为我使用了 ol 标签，但代码显示它带有项目符号。

所以，问题：

如何使脚本与 jquery-3.3.1 一起工作？
如何使文件列表编号而不是项目符号？

【问题讨论】：

你必须使用jQuery Migrate插件jquery.com/download/#jquery-migrate-plugin

标签： javascript jquery html-lists

【解决方案1】：

在头脑中

<script type="text/javascript" src="/jquery-1.11.2.js"></script>
<script type="text/javascript">
    var $ver1JQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jquery-3.3.1.js"></script>
<!-- the version 3 in now in $ while the 1 is in $myJQ -->

在版本3中可以保持全局$

(function($){
    //inside this function, using $ means using the global $myJQ
    $('#selector')...
})($ver1JQ);

查看此链接https://api.jquery.com/jquery.noconflict/，它可以帮助您尝试解决问题。

【讨论】：