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

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

  •  06-07-2019
  •  | 
  •  

문제

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

실제로 이것을하는 jQuery 스크립트를 찾을 수 없습니다. 회전 목마 플러그인이나 그와 비슷한 것을 사용하고 싶지 않습니다.

도움이 되었습니까?

해결책

다행스럽게도 음식과 명성에 대한 코드를 작성하는 미국 프로그래머에게는 상상할 수있는 모든 기능이 아직 플러그인으로 작성된 것은 아닙니다. :)

그러나 이것은 매우 쉽습니다.

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

물론 이것은 플러그인과 같은 기능으로 추출되지만 독자를위한 운동으로 남겨 둘 것입니다.)

다른 팁

<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>

기본적으로 이것이하는 일 :

  1. 6 번째 및 후속 목록 항목을 숨 깁니다.
  2. 5 일 이후 "More ..."라는 목록 항목을 삽입합니다.
  3. 라이브 이벤트를 사용하여 "more ..."링크에 이벤트 핸들러를 추가하여 클릭하면 해당 목록의 모든 목록 항목을 표시 한 다음 스스로 제거합니다.

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

숨겨진 목록의 각 요소부터 시작하려고합니다 (CSS : Display : None). 그런 다음 더 많은 링크가 목록 요소를 밑에 두십시오.

$(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();
});

HTML로 :

<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 개 항목을 표시하도록 호출됩니다.

이것은 작동하지만 확실히 당신은 그것을 몇 가지 조정해야 할 것입니다 :)

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>

나는 당신이 찾고 있던 HidemaxListitems 플러그인을 썼습니다. 최대 목록 항목 수, 슬라이드 애니메이션의 애니메이션 속도 및 확장/붕괴 버튼 HTML을 설정할 수 있습니다. 슬라이드 애니메이션은 부드러운 애니메이션을 제공하기 위해 목록 항목에 따라 순차적으로 수행됩니다.

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

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