Question

使用 JS 中的 For 循环附加 li 项目

2013-12-12

770

javascript jquery html for-loop append

我现在脑子里一片混乱……

我需要附加 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 循环 可以工作……？

    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));
}

这里是文档。

否则，您的方法还不错。我个人不喜欢像这样用 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"}];