Question

我试图根据这样的数组显示一个html列表：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

我能做到：

var arrayLength = fruits.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(fruits[i]);
}

但是有没有办法检查第一个元素，并且我可以像这样添加specyfic类吗？

<li class="className">Banana</li>
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>

Answer 1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var html = '<ul>';
for (var i = 0; i < fruits.length; i++) {
  html += '<li' + (fruits[i] === "Banana" ? ' class="hello"' : '') + '>' + fruits[i] + '</li>';
}
html += '</ul>';

console.log(html);
document.write(html)

.hello {
  font-weight: bold;
}

Answer 2

使用Jquery，你可以这样做：

$('li').first().addClass( "myclass");

您可以使用纯JavaScript，但jquery更快更短。你应该试一试。

Answer 3

以下是vanilla javascript中的解决方案：

＆＃13;

var body = document.getElementsByTagName('body')[0];
var fruits = ['Banana','Orange','Apple','Mango'];

var fruitBasket = document.createElement('ul');
body.appendChild(fruitBasket);

for (var i = 0; i < fruits.length; i++) {
    var newFruit = document.createElement('li');
    var newFruitName = document.createTextNode(fruits[i]);
    newFruit.appendChild(newFruitName);
    fruitBasket.appendChild(newFruit);

    if (fruits[i] === 'Banana') {
        newFruit.classList.add('green-banana');
    }
}

＆＃13;

.green-banana {
color: rgb(0,255,15);
 }

＆＃13;

Answer 4

Vanilla js Solution

＆＃13;

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var list = document.createElement('ul');

fruits.forEach(function(value, index) {
  var item = document.createElement('li');
  list.appendChild(item);
  item.innerHTML = value
  if (index == 0) {
    item.className += "myClass";
  }
});
document.body.appendChild(list);

＆＃13;

.myClass{
  color:red;
  }

＆＃13;

Jquery Solution基于数组创建列表

＆＃13;

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
  
  var list = $("<ul>");
  
  $(fruits).each(function(index,value){
    var item = $("<li>").html(value);
    if (index == 0 ) { item.addClass("myClass");}
    list.append(item);
  });
  $("body").append(list);

＆＃13;

.myClass{
  color:blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

现有列表的Jquery解决方案

＆＃13;

 $("ul#myList li").each(function(index,value){
    if (index == 0 ) { $(this).addClass("myClass");}
  })

＆＃13;

.myClass{
  color:red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
      <li>Banana</li>
<li>Orange</li>
<li>Apple</li>
<li>Mango</li>
    </ul>

＆＃13;

Answer 5

让我们玩一个递归游戏......

var fruits = ["Banana", "Orange", "Apple", "Mango"],
    result = makeList("",fruits);

function makeList(h,a){
  return a.length ? makeList(a.length > 1 ? '<li>' + a.pop() + '</li>' + h
                                          : '<li class="'+a[0]+'Class">' + a.pop() + '</li>' + h,a)
                  : h;
}
document.write(result);
console.log(result);

.BananaClass {color: orange}

Answer 6

非常感谢@ pranav-c-balan

var arrayLength = fruits.length,li=''; 
for (var i = 0; i < arrayLength; i++) { 
li += '<li' + (i==0 ? ' class="className"' : '') + '>' + fruits[i] + '</li>'; 
}

这段代码完成了诀窍，谢谢

如何基于数组显示和样式化列表

6 个答案: