在JS中用For循环附加li项

Append li items with For Loop in JS

本文关键字：li 循环 JS 中用 For      更新时间：2023-09-26

我现在有史以来最大的脑洞。。。

我需要追加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>');
    }

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

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

如果您在需要创建其他幻灯片的时候已经有了幻灯片，您可以使用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文件）。一个好的方法是在开始时克隆（见上文）一个隐藏的空幻灯片，然后在生成其他幻灯片后将其删除。

一个更干净的方法是使用像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"}];
相关文章：