Добавить элементы li с помощью For Loop в JS

0

У меня сейчас самый большой мозг!

Мне нужно, чтобы добавить i количество слайдов (который может быть пустым), но они должны иметь определенные классы для внутренних див, и конкретный идентификатор, состоящий из i во имени горок.

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

(Ну, это работает... но есть ли более чистый способ?)

  • 0
    Посмотрите на шаблонирование [событие, которое будет выполнять основная функция, предоставленная underscore.js].
Теги:
for-loop
append

2 ответа

2
Лучший ответ

Это зависит от необходимости и того, как вы предпочитаете это делать.

Если у вас уже есть слайд, на данный момент вам нужно создать остальные, вы можете использовать метод clone:

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

Вот документация.

Иначе ваш метод не так уж плох. Мне лично не нравится выводить html с помощью js, так как у вас будет несколько файлов для поддержки, если вам нужно изменить макет (по крайней мере, html и js файл). Хорошим способом может быть клонирование (см. Выше) скрытого пустого слайда в начале, а затем удаление его после генерации других.

Поделиться
  • 0
    Это, кажется, не добавляет дочерние элементы div и span с соответствующими классами.
  • 0
    Вы должны быть в состоянии работать с ответом, который он дал вам, и опираться на него. @NicholasHazel
Показать ещё 5 комментариев
0

более чистым способом было бы использовать библиотеку двусторонней привязки, такую как 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"}];
Поделиться
  • 0
    Спасибо за ваш ответ, но это не сработает для моего варианта использования. (Я импортирую и перевожу очень большой файл JSON и запускаю дополнительные сценарии для фильтрации объекта.
  • 0
    Я работаю с большими json-ответами в angular все время. Если вы хотите фильтровать, я бы объединил angular с lodash ( lodash.com ), очень хорошей и производительной библиотекой для работы с коллекциями.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню