ID를 기준으로 LI를 순차적으로 표시

StackOverflow https://stackoverflow.com/questions/1020868

  •  06-07-2019
  •  | 
  •  

문제

저는 자바스크립트 효과를 호출하고 이를 LI에 적용하여 순서대로 수행하는 for-loop를 만드는 중입니다.내가 얻은 것은 다음과 같습니다.

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

그러나 이것은 작동하지 않습니다.LI#1, LI#2, LI#3에 효과를 적용하려면 이 것이 필요합니다.등등.

제가 하려는 것은 페이지 하단에 있는 "더 보기" 버튼을 클릭할 때 트위터가 하는 것과 비슷합니다.

편집하다: UL 요소에 LI를 추가할 것이므로 DIV에 LI를 래핑할 수는 없습니다.

그러나 크기가 변경될 때 UL에 애니메이션을 적용할 수 있는 방법이 있다면 그게 전부일 것입니다.

도움이 되었습니까?

해결책 

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

보세요 표시( 속도, [콜백] ).문서에서 :

우아한 애니메이션을 사용하여 일치하는 모든 요소를 ​​보여주고 완료 후 선택적 콜백을 발사하십시오.

일치하는 각 요소의 높이, 너비 및 불투명도는 지정된 속도에 따라 동적으로 변경됩니다.

또한 다음과 같이 요소를 숨기고 표시하는 다른 방법도 있습니다. 점점 뚜렷해지다 그리고 사라지다.보세요 http://docs.jquery.com/Effects .

나는 정적 데이터를 사용하여 당신이 원하는 종류의 빠른 모형을 만들었습니다.

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

작동하므로 다음과 같은 작업을 수행할 수 있고 요소 ID를 반복하는 골치 아픈 작업을 수행할 필요가 없다고 생각할 수 있습니다.

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

확실히 하기 위해 위의 호출은 $.load 의 출력을 가정합니다. /items/?p=2 귀하의 사이트에 LI가 많이 있습니다.

다른 팁

각각이 같은 속도로 나타나기를 원하지만 각각 사이에 약간의 지연이 있으면 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의 값을 10으로 볼 수 있습니다.

또한 AJAX를 통해 새 항목을로드하는 다른 이벤트 에서이 문제를 트리거하는 경우 ( "More"버튼을 클릭 한 후) 로직을 래핑해야합니다. .라이브() jQuery 1.3에서 사용할 수 있습니다.

jQuery 1.2를 사용하는 경우 사용할 수 있습니다 라이브 퀴리 대신에.

그런 목록이 있으면 다음과 같은 일을해야합니다.

<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> 첫 번째 만,이 사용자 정의 이벤트를 트리거하여 본질적으로 도미노 효과를 설정합니다.

다음은 직장에서의 예입니다. 더 빨리 원한다면 '느린'을 '빠른'또는 시간으로 바꿀 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top