訂購HTML列表，然後鎖定目標元素

Question

我正在致力於訂購HTML列表的功能。我在StackOverflow（thx !!）上找到了下面的代碼，我稍微調整了一下。我的目標是對列表進行排序，然後在排序後顯示未顯示的（！（「：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（ '列表'）[0]， '日期'， '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語法來完成相同的選擇）