jQuery를 사용하여 목록 요소 수 제한

20-30 개의 이벤트가 포함 된 목록 요소가 있습니다. 나는 그 중 5 개만 보여주고 싶고 다음 5 개를보기 위해 클릭 할 수있는«기타»링크가 있습니다. 5 개의 다음 이벤트가 추가되는지는 중요하지 않습니다.jQuery를 사용하여 목록 요소 수 제한

실제로이 작업을 수행하는 jQuery 스크립트를 찾을 수 없습니까, 아니면 그냥 장님입니까? 나는 회전 목마 플러그인이나 그런 것을 사용하고 싶지 않다.

출처

2009-06-20 Ronny-André Bendiksen

음, fortunat 음식과 명성에 대한 코드를 작성 엘리 우리 프로그래머는 기능을하지 상상할 수있는 모든 조각 플러그인 :

로 아직 작성되었습니다하지만이 매우 쉽습니다 : 물론

var from = 0, step = 5; 

function showNext(list) { 
    list 
    .find('li').hide().end() 
    .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))') 
     .show(); 
    from += step; 
} 

function showPrevious(list) { 
    from -= step; 
    list 
    .find('li').hide().end() 
    .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))') 
     .show(); 
} 

// show initial set 
showNext($('ul')); 

// clicking on the 'more' link: 
$('#more').click(function(e) { 
    e.preventDefault(); 
    showNext($('ul')); 
});

이 더 낫다 플러그인과 같은 함수로 추출되었지만 독자의 연습으로 남겨 두겠다.)

출처

2009-06-20 10:15:56

이것은 좋은 보이지만, 어떻게 내가 처음에 처음 다섯 제외한 모든 목록 항목을 숨길 수 있습니까? –

'showNext (yourList) '를 처음 호출하면 처음 다섯 요소를 제외하고 모든 것이 숨겨집니다. 나는 당신이'$ (document) .ready()'에서 그것을 호출하고 싶을 것이라고 생각한다. –

그것은 나를 위해 작동하지 않았지만, 모든 리튬을 ul에 포장하는 것을 잊어 버린 것은 나뿐입니다.) 감사합니다! –

이 당신이 그것을 몇 무슨 일이 :)

HTML을 조정할 필요하지만 확실히 작동합니다

<div style="width:200px;border:3px groove blue;"> 
    <ul id="list"> 
    <li>Thai</li> 
    <li>Turkish</li> 
    <li>Portuguese</li> 
    <li>American English</li> 
    <li>Arabic</li> 
    <li>Canadian French</li> 
    <li>Chinese Simplified</li> 
    <li>Chinese Traditional</li> 
    <li>Czech</li> 
    <li>Danish</li> 
    <li>Dutch</li> 
    <li>English</li> 
    <li>Finnish</li> 
    <li>French</li> 
    <li>German</li> 
    <li>Greek</li> 
    <li>Hebrew</li> 
    <li>Hungarian</li> 
    <li>Italian</li> 
    <li>Japanese</li> 
    <li>Norweigan</li> 
    <li>Polish</li> 
    <li>Russian</li> 
    <li>Spanish</li> 
    </ul>  
    <a href="#" id="lnkMore">More</a> 
</div>

자바 스크립트 : 이벤트에 대한

<script type="text/javascript"> 
    var len = 0; 
    var curStart = 0; 
    var count = 5; 
    var items=new Array(); 
    function BackupList() { 
     var lst = $("ul#list"); 
     len= $("ul#list li").length; 
     if (len <= count) 
      return; 

     $("ul#list li").each(function() { 
      items.push($(this)); 
      $(this).remove(); 
     }); 

     var html=""; 
     for (curStart; curStart < count && curStart < len; curStart++) { 
      html += "<li>" + $(items[curStart]).html() + "</li>"; 
     } 
     $(html).appendTo($(lst)); 
    } 

    function ShowMore() { 
     if (curStart >= len) { 
      curStart = 0; 
     } 

     $("ul#list li").each(function() { 
      $(this).remove(); 
     }); 

     var l = curStart; 
     var html = ""; 
     for (curStart; curStart < (l + count) && curStart < len; curStart++) { 
      html += "<li>" + items[curStart].html() + "</li>"; 
     } 
     $(html).appendTo($("ul#list")); 
    } 
</script>

와이어 JQuery와 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     BackupList(); 
     $("a#lnkMore").click(function() { ShowMore(); }); 
    }); 
</script>

을

출처

2009-06-20 10:15:30 TheVillageIdiot

목록의 각 요소를 숨기려면 (CSS : display : none) 시작하고 싶다. 그런 다음 목록 요소 아래에 링크를 추가하십시오. HTML로

$(document).ready(function() 
{ 
    $("a#myMoreLink").click(function() 
    { 
     var items = $("ul#myList > li:hidden"); 

     if(items.length > 0) 
      items.slice(0, 5).show(); 
     else 
      $(this).html("No more"); 

     return false; 
    }); 

    $("a#myMoreLink").click(); 
});

: 그런

<ul id="myList"> 
    <li style="display: none"></li> 
    <li style="display: none"></li> 
</ul> 
<a href="http://" id="myMoreLink">More</a>

뭔가. $ ("a # myMoreLink"). click(); 페이지를로드 할 때 초기 5 개 항목을 표시하기 위해 호출됩니다.

출처

2009-06-20 10:16:36

으로 업데이트했습니다. 버그 코드 : 처음 5 번째 요소와 2 번째 요소가 항상 전환됩니다. 10에서 15까지의 요소는 절대로 표시되지 않습니다. –

코드를 테스트하지 않았습니다. 의사 코드입니다. OP는 그들이 추가되었는지 (쉽게 변경할 수 있는지) 중요하지 않다고 말했다. 작동하지 않습니다. 방금 테스트 했어. 오타가 있습니다 - myList. 당신은 저를 위해 저를 반박하고 10-15의 성분에 관하여 몇몇 벌레를 구성하십시오? 이것은 경쟁이 아닙니다. 전체 코드는 다음과 같습니다. http://pastebin.com/m56bb8358 –

<html> 
<head><title>Test</title></head> 
<body> 
<ul class="more"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
    <li>six</li> 
    <li>seven</li> 
    <li>eight</li> 
    <li>nine</li> 
    <li>ten</li> 
</ul> 
<script type="text/javascript" src="jquery-1.3.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("ul.more").each(function() { 
    $("li:gt(4)", this).hide(); /* :gt() is zero-indexed */ 
    $("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */ 
    }); 
    $("li.more a").live("click", function() { 
    var li = $(this).parents("li:first"); 
    li.parent().children().show(); 
    li.remove(); 
    return false; 
    }); 
}); 
</script> 
</script 
</body> 
</html>

이 수행 기본적으로 무엇을 :

은 6 일 이후 목록 항목을 숨 깁니다;
다섯 번째 말하기 "More ..."다음에 목록 항목을 삽입합니다.
라이브 이벤트를 사용하여 "기타 ..."링크에 이벤트 처리기를 추가합니다. 클릭하면 해당 목록의 모든 목록 항목을 표시 한 다음 자신을 제거합니다.

편집 : 몇 가지 오류가 수정되었습니다. 위의 예제는 이제 완전히 작동합니다 (jquery 링크가 올바른지 확인하십시오).

출처

2009-06-20 10:33:59 cletus

나는 당신이 찾고 있던 hideMaxListItems 플러그인을 작성했습니다. 목록 항목의 최대 수, 슬라이드 애니메이션의 애니메이션 속도 및 확장/축소 HTML을 설정할 수 있습니다. 슬라이드 애니메이션은 목록 항목별로 순차적으로 수행되어 부드러운 애니메이션을 제공합니다.

http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/

출처

2010-12-14 17:38:33 jwinn

jQuery를 사용하여 목록 요소 수 제한

답변

관련 문제