在 JS 中使用 For 循环附加 li 项

Question

我现在的脑洞最大……

我需要附加 i 数量的幻灯片（可以为空白），但它们必须具有用于内部 div 的特定类，以及幻灯片名称中由 i 组成的特定 ID。

<ul class="bjqs"><!-- Target This -->

<li id="slide0"><!-- Append these -->
    <div class="center"><!-- Append these -->
        <span class="author"></span><!-- Append these -->
        <span class="time"></span><!-- Append these -->
    </div>
    <div class="image"></div><!-- Append these -->
</li>
<li id="slide1"><!-- Append these -->
    <div class="center"><!-- Append these -->
        <span class="author"></span><!-- Append these -->
        <span class="time"></span><!-- Append these -->
    </div>
    <div class="image"></div>
</li>
<li id="slide2">... etc
</ul>

也许基本的for loop 可以工作...？

    var slideCount = 20;
    for(var i = slideCount-1;i>=0;i--){
        $('ul.bjqs').after('<li id="slide'+i+'"><div class="center"><span class="author"></span><span class="time"></span></div><div class="image"></div></li>');
    }

（嗯，它确实有效......但是有更清洁的方法吗？）

Answer 1

这取决于您的需求和您喜欢的方式。

如果你现在已经有一张幻灯片需要创建其他的，可以使用clone方法：

var slideCount = 20;
for(var i = slideCount-1;i>=0;i--){
    $('ul.bjqs').after($('#slide0').clone().attr('id', 'slide'+i));
}

Here is the documentation.

否则，您的方法还不错。我个人不喜欢这样输出带有 js 的 html，因为如果您必须更改布局（至少 html 和 js 文件），您将需要维护多个文件。一个好的方法是在开始时克隆（见上文）隐藏的空幻灯片，然后在生成其他幻灯片后将其删除。

Answer 2

更简洁的方法是使用双向绑定库，例如 angular.js

HTML

<li ng-repeat="slide in slides" id="slide{{$index}}">
<div class="center">
   <span class="author">{{slide.author}}</span>
   <span class="time">{{slide.time}}</span>
</div>
<div class="image"></div>
</li>

JS

$scope.slides=[{author:"Chris",time:"Tues"},{author:"Owen",time:"Wed"}];