與For循環追加李項JS

Question

我有最大的brainfart有史以來現在...

我需要追加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"}];