JavaScript:将数组排序为有序列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12607162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 16:38:56  来源:igfitidea点击:

JavaScript: Sort array into an ordered list

javascripthtml

提问by ai5uzu

On my homework, I have to create an array, and I did that, but not I need it sort into an ordered list. My professor does not give any example codes and I couldn't find anything on the web that can help me put into a ordered list. Help!

在我的作业中,我必须创建一个数组,我做到了,但我不需要将它排序到有序列表中。我的教授没有给出任何示例代码,我在网上找不到任何可以帮助我放入有序列表的内容。帮助!

Direction specifically: In an external JavaScript file, create an array containing the titles of your favorite books (you can make up titles if you wish.) When the page loads, use JavaScript to display the titles on the Web page within an ordered list. Since the book list is variable, the list must be established dynamically. Use either the write method of the document object or modify the innerHTML property of an element.

具体方向:在外部 JavaScript 文件中,创建一个数组,其中包含您最喜欢的书籍的书名(您可以根据需要自行编名)。当页面加载时,使用 JavaScript 在网页上的有序列表中显示书名。由于图书列表是可变的,因此列表必须动态建立。使用文档对象的 write 方法或修改元素的 innerHTML 属性。

I have

我有

var books = new Array();
books[0] = "Fifty Shades of Grey";
books[1] = "Twilight";
books[2] = "The Notebook";
books[3] = "Dear John";
books[4] = "Demon in my View";

var bookList = books.sort();
document.write(bookList);

but that only sorts with commas :(

但这只能用逗号排序:(

回答by Juan Mendes

You already sorted the array. Just print each book into an <li>and append the HTML to your list.

您已经对数组进行了排序。只需将每本书打印成一个<li>并将 HTML 附加到您的列表中。

The reasons you see commas when you document.write(boooks)is that the document.writecalls toStringon the object that is passed to it, toStringfor an array is implemented as array.join()and the default separator is a comma.

您看到逗号的原因document.write(boooks)是对传递给它的对象的document.write调用toStringtoString因为数组实现为array.join()并且默认分隔符是逗号。

<ol id="books">
</ol>?

// This looks much nicer a separate call for each array member
var books = [
   "Fifty Shades of Grey",
   "Twilight",
   "The Notebook"
];

var html = "";
for (var i =0; i < books.length; i++) {
    html += "<li>" + books[i]+ "</li>";
}
document.getElementById("books").innerHTML = html;?

Samplehttp://jsfiddle.net/nkQLM/1/

示例http://jsfiddle.net/nkQLM/1/

回答by Guffa

Just put the HTML code for the list around the strings:

只需将列表的 HTML 代码放在字符串周围:

document.write('<ol><li>'+bookList.join('</li><li>')+'</li></ol>');

A bit beyond the exercice, but putting content in the page like this assumes that there is no characters in the strings that has a special meaning in the HTML code, like <, >or &. Ideally you would create element objects, put the text in them, and then add them to the document tree. For example using the jQuery library:

有点超出练习范围,但是像这样将内容放入页面假定字符串中没有在 HTML 代码中具有特殊含义的字符,例如<,>&。理想情况下,您应该创建元素对象,将文本放入其中,然后将它们添加到文档树中。例如使用 jQuery 库:

Put an element in the page:

在页面中放置一个元素:

<ol id="list"></ol>

In the ready event (or a script tag below the list) put the list elements in the list:

在就绪事件(或列表下方的脚本标记)中,将列表元素放入列表中:

$.each(booklist, function(){
  $('#list').append($('<li/>').text(this));
});

回答by Anoop

No it is not sorting the array with comma. DEMO

不,它不是用逗号对数组进行排序。演示

when you are calling document.write(bookList);bookList getting converted into string by auto insertion of ',' between items

当您调用 document.write(bookList);bookList 时,通过在项目之间自动插入 ',' 将其转换为字符串

you can replace the comma using join(in my example with space) as

您可以使用join(在我的示例中为空格) 替换逗号

document.write(bookList.join("  "))

if you want to generate orderlist use following code

如果要生成订单列表,请使用以下代码

var html ="<ol><li>"+ bookList.join('</li><li>') + "</li></ol>";

无功 html ="<ol><li>"+ bookList.join('</li><li>') + "</li></ol>";