html（）操作内的jQuery函数

Question

在jQuery中如何在html()动作中添加for循环功能

file = var cars = ["Saab", "Volvo", "BMW"];

$(".selector").html(function(){
    for(i = 0; i < file.length; i++){
       return "<li>"+file[i]+"</li>";
    }
});

这些代码行返回文件中唯一的第一个字符串

<li>Saab</li>

但我正在寻找

<li>Saab</li>
<li>Volvo</li>
<li>BMW</li>

Answer 1

在您的代码中，您是从for循环的第一次迭代中从函数本身返回的，因此它将仅显示第一个。 因此，您可以在join()帮助下做一些简单的事情。 您的代码中不需要循环和回调。

 var file = ["Saab", "Volvo", "BMW"]; $(".selector").html("<li>" + file.join('</li><li>') + "</li>") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="selector"></ul> 

或者您可以使用map()

 var file = ["Saab", "Volvo", "BMW"]; $(".selector").html(file.map(function(v) { return $('<li/>', { text: v }) })) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="selector"></ul> 

Answer 2

您的代码中有2个错误

第一个是用错误的方式定义数组

file = var cars = ["Saab", "Volvo", "BMW"];  //wrong 

var file =  ["Saab", "Volvo", "BMW"]; // correct way
var cars =  ["Saab", "Volvo", "BMW"]; // correct way

循环内第二个错误的return语句位置

为什么您的代码不起作用？ 因为return "<li>"+file[i]+"</li>"; return停止执行并退出该函数。 return总是立即退出其功能，如果它在循环内，则不再执行。

尝试这个

  var file = ["Saab", "Volvo", "BMW"]; $(".selector").html(function(){ var str ='' for(i = 0; i < file.length; i++){ str += "<li>"+file[i]+"</li>"; } return str }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="selector"></ul> 

Answer 3

我猜你需要这样定义var： var file = cars = ["Saab", "Volvo", "BMW"]; 您可以使用Array.map()方法。

 var file = cars = ["Saab", "Volvo", "BMW"]; $(".selector").html(function(){ return file.map(function(el){ return "<li>"+el+"</li>"; }); }); 

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

Answer 4

您需要使用.html吗？

因为查看您的情况，所以我更喜欢使用.each（）。 它看起来应该像这样。

var file = ["a","b","c"];

$.each(file, function(index, value) {
    //create element using value;
    //append element to wherever you think is necessary
})