将vanilla JavaScript翻译为jQuery

Question

以下是JS功能：

我想更新这个，所以它使用jQuery，但我很难搞清楚如何翻译它。

function pathContents(fileList) {
    var list = document.createElement('ul');
    for (file in fileList) {
        var item = document.createElement('li');
        item.appendChild(document.createTextNode(fileList[file]));
        list.appendChild(item);
    }
    return list;
}

更新： 删除对pathContents（）的调用并将其替换为Malvolio的代码 - 这是浏览器输出 -

为什么不将数据显示为无序列表中的列表项？

Answer 1

jQuery等同于＃34;全程＆＃34;将是：

function pathContents(fileList) {
    var $list = $('<ul/>');
    $.each(fileList, function () {
        $('<li/>').text(this).appendTo($list);
    });
    return $list;
}

在jQuery代码中经常可以看到this内$.each的使用，但使用函数参数更简洁：

    $.each(fileList, function (_, file) {
        $('<li/>').text(file).appendTo($list);
    });

但纯粹的JavaScript方式确实不是那么糟糕。首先，你无法击败它的表现。

Answer 2

你可以试试以下:)：

function pathContents(fileList) {
    var list = $('<ul />');
    for (file in fileList) {
        list.append($('<li />').text(fileList[file]));
    }
    return list;
}

或者你可以return list.html();

是的，正如许多用户所提到的，与纯javascript

相比，您会有一些性能损失

Answer 3

您的函数的现代版本将是

let pathContents =
    fileList => 
         $('<ul/>').append(fileList.map(file => $('<li/>').text(file)));

此版本使用jQuery创建和附加到DOM对象，函数的fat-arrow表示法和列表上的.map方法。它不依赖于不可靠的in运算符，并且避免了Bobby Tables漏洞利用。

我保留了你的函数和变量名，但我认为你应该考虑更多的描述性名称。

Answer 4

为了获得更好的性能，只需在最后解析HTML字符串：

function pathContents(fileList) {
    var ul = '<ul>';
    for( var file of fileList )
        ul += `<li>${file}</li>`;
    ul += '</ul>';
    
    return $.parseHTML(ul);
;
}

console.log( pathContents([1,2,3])[0].outerHTML )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或简单如下：

function pathContents(fileList) {
    var ul = '<ul><li>' + fileList.join('</li><li>') + '</li></ul>';

    return $.parseHTML(ul);
}

通过使用$.parseHTML，解析后的输出将被删除任何<script>标记。如果您确实希望保留它们，请将true作为该方法的第二个参数。有关此内容，请参阅further discussion。

  

从javascript创建DOM时，请小心：确保   输入已清理（不包含任何恶意代码）。