使用特定的字符串對Javascript中的數組進行排序

我想按字母順序排列數組，從select中的選項開始。這裏是我的代碼：使用特定的字符串對Javascript中的數組進行排序

HTML

<select id="select"> 
    <option>Apples</option> 
    <option>Oranges</option> 
    <option>Peaches</option> 
    <option>Pears</option> 
</select> 
<div id="fruits"> 
    <ul> 
     <li>Apples</li> 
     <li>Peaches</li> 
     <li>Pears</li> 
     <li>Oranges</li> 
    </ul> 
</div>

的Javascript

document.getElementById('select').addEventListener('click', function() { 
    var index; 
    var fruit = ["Apples", "Oranges", "Pears", "Peaches"]; 
    var listOutput = document.getElementById('fruits'); 
    var text = "<ul>"; 

    fruit.sort(); 

    for (index = 0; index < fruit.length; index++) { 
     text += "<li>" + fruit[index] + "</li>"; 
    } 
    text += "</ul>"; 

    listOutput.innerHTML = text; 
});

我已經能夠水果按字母順序排序，但我希望能夠按字母順序基於什麼是排序選擇。例如，如果我在選擇摘橘子，我想的水果輸出爲這樣：

Oranges 
Peaches 
Pears 
Apples

我想環路開始按字母順序選擇的選項排列，一旦所有的字符串已經循環，開始在字母的頂部和繼續下去，直到所有的弦已經輸出

來源

2014-10-29 scoopitup

蘋果是如何完成的？ – Scimonster 2014-10-29 05:54:10

你將數組聲明爲'fruit'，並且正在對'fruits'進行排序。 – sabithpocker 2014-10-29 05:57:24

我想按字母順序從選定的選項開始循環數組，並且一旦所有字符串都循環，從字母表的頂部開始並繼續，直到輸出所有字符串 – scoopitup 2014-10-29 05:57:55

可以使用

var fruit = ["Apples", "Oranges", "Pears", "Peaches"]; 
fruit.sort(function(a, b){ 
return // Ur Logic 
})

請參閱http://www.javascriptkit.com/javatutors/arraysort2.shtml

來源

2014-10-29 05:55:14

您能否詳細說明您的答案以及如何解決我的具體問題？ – scoopitup 2014-10-29 06:04:23

你在函數中寫你的邏輯，你應該返回-1，如果你想在排序之前來到b之前，反之亦然 – 2014-10-29 06:15:18

請通過我提供的鏈接，在這裏你會有詳細的解釋。如果您仍然有疑問，請隨時提問 – 2014-10-29 06:16:11

有一些方法可以實現你想要的東西。讓我們開始定義的點擊功能以外的一些瓦爾所以它不是每一個新的點擊重複：

var listOutput = document.getElementById('fruits'), 
    select = document.getElementById('select'), 
    opts = select.querySelectorAll('option'), 
    len = opts.length, 
    fruit = []; 
// populate fruit with the values of all options 
for (var i = 0; i < len; i++) fruit.push(opts[i].value); 
fruit.sort(); // sort fruit alphabetically

如果你要支持舊的瀏覽器不知道現代陣列方法：

select.addEventListener('click', function() { 
    var text = '<ul>', 
     idx = 0, 
     sel = this.selectedOptions[0].value; // get the selected value 
    for (; idx < len; idx++) if (fruit[idx] == sel) break; // get index of selected value 
    for (var i = idx; i < len; i++) { // get all items from selected to end 
     text += '<li>' + fruit[i] + '</li>'; 
    } 
    for (var i = 0; i < idx; i++) { // get all items from first to selected 
     text += '<li>' + fruit[i] + '</li>'; 
    } 
    listOutput.innerHTML = text + '<ul'; 
});

相反的兩個用於 - 迴環打印項目，你可以做一個：

// get all items from selected to end, then from first to selected 
    for (var i = idx; i < len;) { 
     text += '<li>' + fruit[i] + '</li>'; 
     if (++i == len && len != idx) i = 0, len = idx; 
    }

Find a DEMO here。使用現代陣列方法(find them here)它的寫作較少：

var listOutput = document.getElementById('fruits'), 
    select = document.getElementById('select'), 
    opts = select.querySelectorAll('option'), 
    fruit = [].map.call(opts, function(opt) {return opt.value}).sort(); 

select.addEventListener('click', function() { 
    var idx = fruit.indexOf(this.selectedOptions[0].value), 
     arr = fruit.slice(idx).concat(fruit.slice(0, idx)); 
    listOutput.innerHTML = arr.reduce(function(a, b) { 
     return a + '<li>' + b + '</li>' 
    }, '<ul>') + '</ul>'; 
});

來源

2014-10-29 15:41:29

使用特定的字符串對Javascript中的數組進行排序

回答

相關問題