javascript - 对 HTML 列表进行排序，然后定位元素

Question

我正在开发一个订购 HTML 列表的函数。我在 StackOverflow 上找到了以下代码(谢谢!!)并且我做了一些调整。我的目标是对列表进行排序，然后在排序后显示未显示的 (!(":visible")) lis 元素。该功能无需为显示未显示的元素而制作的特定部分即可完美运行。

function sortList(ul){ 
var new_ul = ul.cloneNode(false);

// Add all lis to an array
var lis = []; 
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI')
lis.push(ul.childNodes[i]); 
} 

// Sort the lis in descending order
lis.sort(function(a, b){
return parseInt(b.getElementsByClassName(variable)[0].innerHTML , 10) - parseInt(a. getElementsByClassName(variable)[0].innerHTML , 10); 
});
if (order == 'asc') {lis.reverse();}

// Add them into the ul in order 
for(var i = 0; i < lis.length; i++) {
//THIS IS THE PART that makes the function not working anymore
    if (!lis[i].is(":visible")) {
        lis[i].fadeToggle("slow","linear");
    }
//END OF THE PART
    new_ul.appendChild(lis[i]);
}
ul.parentNode.replaceChild(new_ul, ul); 
}

我这样调用该函数: sortList(document.getElementsByClassName('list')[0],'date','asc');

我的 HTML 看起来像这样:

<ul class="list">
    <li> <span class="date">1</span></li>
    <li> <span class="date">2</span></li>
    <li style="display:none;"> <span class="date">3</span></li>
    <li style="display:none;" > <span class="date">4</span></li>
</ul>

感谢您的帮助!

Answer 1

如果您要使用 jQuery 来实现切换功能，您需要将其包含在您的页面中

此外，您的 sortList 函数没有传递其他参数，所以我将其更改为这样

function sortList(ul, variable, order) { // <-- pass the parameters here
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for (var i = ul.childNodes.length; i--;) {
        if (ul.childNodes[i].nodeName === 'LI') lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function (a, b) {
        return parseInt(b.getElementsByClassName(variable)[0].innerHTML, 10) - parseInt(a.getElementsByClassName(variable)[0].innerHTML, 10);
    });
    if (order == 'asc') {
        lis.reverse();
    }

    // Add them into the ul in order 
    for (var i = 0; i < lis.length; i++) {
        //THIS IS THE PART that makes the function not working anymore
        /* using jQuery notation for the jQuery function calls */
        if (!$(lis[i]).is(":visible")) {  // <-- here
            $(lis[i]).fadeToggle("slow", "linear"); // <-- and here
        }
        //END OF THE PART
        new_ul.appendChild(lis[i]);
    }
    ul.parentNode.replaceChild(new_ul, ul);
}

<强> DEMO JS FIDDLE

最后，如果您使用 jQuery，则可以将所有 getElementsByClassName(..) 替换为简单的 $('.className')，因为它基本上是相同的事情(即，这是完成相同选择的 jQuery 语法)