管道输入无序列表标题并随机化项目

Question

我的主页上有一个文章列表，"read more" link 指向文章页面：

<div class="articles_list">
 <ul>
  <li>Article 1</li>
  <li>Article 2</li>
  <li>Article 3</li>
  <li>Article 4</li>
 </ul>
  <div class="clear"></div>
   <div class="more"><a href="articles.html">and more...</a></div>
</div>

我想更改标题，因为我有 4 篇以上的文章，并且不时地随机排列它们，而不必自己打字。例如，列表可以是：

<div class="articles_list">
 <ul>
  <li>Article 5</li>
  <li>Article 1</li>
  <li>Article 8</li>
  <li>Article 4</li>
 </ul>
  <div class="clear"></div>
   <div class="more"><a href="articles.html">and more...</a></div>
</div>

有什么办法可以做到吗？

Answer 1

这里您需要编写一些脚本。我在这里准备了一个文章列表 (13)。同样，arr（数组）需要包含您拥有的文章列表。 Rest all 是动态代码，它以随机顺序选择文章。

var arr = ['Article 1','Article 2','Article 3','Article 4','Article 5','Article 6','Article 7','Article 8','Article 9','Article 10','Article 11','Article 12','Article 13' ];


//Prepare 4 random articles.
var finalList = [];
var i = 0;
var node = document.getElementById('ulArticle');
while(true){
  var randomNo = Math.floor(Math.random() * arr.length);
  var art = arr[randomNo];
  if(finalList.indexOf(art) == -1){
    finalList.push(art);
    node.innerHTML += '<li>'+art+'</li>';
    i++;
  }
  if(i >= 4){
    break;
  }
}

<div class="articles_list">
 <ul id="ulArticle">
  
 </ul>
  <div class="clear"></div>
   <div class="more"><a href="articles.html">and more...</a></div>
</div>

管道输入无序列表标题并随机化项目

Pipe in unordered list titles and randomize items

html

random

listitem

html-lists