Показать LI на основе идентификатора в последовательности

Question

Я работаю над созданием цикла for, который вызывает эффект javascript и применяет его к LI, делая это последовательно. Вот что у меня есть:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

Однако это не работает. Мне нужно, чтобы применить эффект к LI # 1, затем к LI # 2, LI # 3 ... и так далее.

То, что я пытаюсь сделать, похоже на то, что делает Twitter, когда вы нажимаете кнопку " more &; Кнопка внизу страницы только вместо того, чтобы прыгать, я хочу, чтобы она стала меньше.

РЕДАКТИРОВАТЬ: Я не могу просто обернуть LI в DIV, так как собираюсь добавлять LI в элемент UL.

Однако, если бы существовал способ анимировать UL, так как он изменил размер, я был бы всем ради этого.

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

Посмотрите шоу (скорость, [обратный вызов]) . Из документа:

  

Показать все подходящие элементы, используя   изящная анимация и стрельба   необязательный обратный вызов после завершения.

     

Высота, ширина и непрозрачность каждого   из согласованных элементов изменены   динамически в соответствии с указанным   скорость.

Кроме того, существуют другие способы скрытия и раскрытия элементов, такие как fadeIn и < a href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut . Просмотрите http://docs.jquery.com/Effects .

Я сделал быстрый макет того, что вам нужно, со статическими данными:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

и это работает, поэтому вполне возможно, что вы могли бы сделать что-то вроде следующего, и вам не пришлось бы беспокоиться о головной боли при переборе идентификаторов элементов:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

Просто чтобы прояснить, приведенный выше вызов $ .load предполагает, что вывод / items /? p = 2 на вашем сайте - это набор ЛИ

Answer 2

если вы хотите, чтобы каждый отображался с одинаковой скоростью, но с небольшой задержкой между ними, вам может понадобиться использовать setTimeout ... например ...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

Это может показаться немного глупым, но если я правильно помню, если вы не заключите свой индекс (i) в какое-то вложение, тогда выполняемый метод всегда будет видеть значение i как 10.

Answer 3

Кроме того, убедитесь, что если вы запускаете это при другом событии, которое загружает новые элементы через Ajax (например, после нажатия кнопки " More "), вам нужно обернуть свою логику в .live () , которая доступна в jQuery 1.3.

Если вы используете jQuery 1.2, вы можете вместо этого использовать livequery .

Answer 4

Это следует сделать, если у вас есть такой список:

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

Затем можно написать код для последовательного отображения элементов списка следующим образом:

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

Код выполняет следующее: находит меню <ul>, показывает его, находит все <li> и скрывает их, связывает пользовательское событие с именем show, которое медленно показывает элемент, и как только оно полностью отображается проверяет, есть ли рядом с ним <=>, и инициирует то же событие для этого элемента. Затем мы отфильтровываем все <=> только первое и запускаем для него это пользовательское событие, по существу отключая эффект домино.

Вот пример этого на работе . Если вы хотите быстрее, вы можете изменить «медленно» на «быстро» или время.