Показать LI на основе идентификатора в последовательности - PullRequest
Новая
       17

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

2 голосов
/ 20 июня 2009

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

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

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

То, что я пытаюсь сделать, похоже на то, что делает Твиттер, когда вы нажимаете кнопку «еще» внизу страницы только вместо того, чтобы прыгать. Я хочу, чтобы это облегчилось.

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

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

Ответы [ 4 ]

1 голос
/ 20 июня 2009

, если вы хотите, чтобы каждый отображался с одинаковой скоростью, но с небольшой задержкой между ними, вам может понадобиться использовать 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.

1 голос
/ 20 июня 2009 
$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

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

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

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

Также есть другие способы скрытия и раскрытия элементов, такие как fadeIn и 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 на вашем сайте представляет собой набор LI

0 голосов
/ 20 июня 2009

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

<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, которое медленно показывает элемент, и как только оно полностью отображается смотрит, есть ли рядом с ним <li>, и запускает то же событие для этого элемента. Затем мы отфильтровываем из всех <li> только первый и запускаем для него это пользовательское событие, по существу отключая эффект домино.

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

0 голосов
/ 20 июня 2009

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

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

...