有某种方法可以使用jQuery .append中的函数吗?我需要这样的东西:

$("<tbody>").append(function(){
    for (i = 0; i < Test1.length; i++){
        Test1[i]
    }
})


为什么在这种情况下一切正常

$("<tr>").append(
    $("<th>").append("#"),
    $("<th>").append(THeaders[1]),
    $("<th>").append("Tuesday"),
    $("<th>").append("Wednesday"),
    $("<th>").append("Thurdsday"),
    $("<th>").append("Friday"),
    $("<th>").append("Saturday")
)


但是在下一个选项中,我收到的元素不带“ ”:

$("<tr>").append(
    $.each(THeaders, function(i, d){
        $("<th>").append($('<th></th>').text(d));
    })
)


哪里

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"];

最佳答案

您可以使用JS的.map()检索每个值,并使用模板文字``将值包装在TR标记中

ES6



var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"];

$('thead tr').append( THeaders.map(val => `<th>${val}</th>`) );

th{border: 1px solid #ddd;}

<table>
  <thead><tr></tr></thead>
</table>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>





或JS老式的方式:



var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"];

$('thead tr').append( THeaders.map(function(val) { return '<th>'+ val +'</th>'; }) );

th{border: 1px solid #ddd;}

<table>
  <thead><tr></tr></thead>
</table>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>





您尝试使用的jQuery方式-会错过某种.mapreturn和$ Element构造,例如



var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"];

$("<tr/>", {
  append: THeaders.map(function(val){
     return $('<th/>', {text: val});
  }),
  appendTo: 'thead'
})

th{border: 1px solid #ddd;}

<table>
  <thead></thead>
</table>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

关于javascript - 创建HTML结构并在附录中使用函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46163780/

10-11 23:25
查看更多