使用特定的字符串对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中的数组进行排序

回答

相关问题