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"}];

在JS中使用For循环追加li项目

2 个答案: