Mit jQuery die Anzahl der Listenelemente zu begrenzen,

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe ein Listenelement eine Anzahl von zwischen 20 bis 30 Veranstaltungen enthalten. Ich möchte nur 5 von denen zeigen, und habe einen «Mehr» Link klicke ich kann das die nächsten fünf zu beobachten. Dabei spielt es keine Rolle, ob die fünf nächsten Ereignisse angehängt werden.

Es kann keine jQuery Skript finden, dass dies tatsächlich der Fall ist, oder bin ich nur blind? Ich will nicht, Karussell-Plugins oder ähnliches verwenden.

War es hilfreich?

Lösung

Nun, zum Glück für uns Programmierer, der Code für Nahrung und Ruhm zu schreiben, nicht jedes denkbares Stück Funktionalität noch als Plugin geschrieben wurde:)

Das ist aber ganz einfach: 

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

Natürlich besser dies in Plugin-ähnlichen Funktion extrahiert wird, aber ich werde verlassen, dass als eine Übung für einen Leser;)

Andere Tipps

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

Im Grunde, was das bedeutet:

  1. Blendet die 6. und nachfolgende Listenelemente;
  2. Fügt ein Listenelement nach dem 5. sagen: „Mehr ...“;
  3. Verwendet Live-Events einen Event-Handler auf die „Mehr ...“ Links hinzufügen, so dass, wenn sie angeklickt werden sie alle Listeneinträge in dieser Liste zeigen und dann selbst entfernen.

Edit: ein paar kleine Fehler behoben werden. Die oben ist ein voll funktionsfähiges Beispiel jetzt (nur sicherstellen, dass der Jquery Link korrekt ist).

Sie möchten mit jedem Element in der Liste versteckt starten (CSS: display: none). Dann haben Sie Ihre mehr Link undernearth das Listenelement. 

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

Mit HTML: 

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

So ähnlich. $ ( "A # myMoreLink") () klicken. aufgerufen wird die Seite mit den ersten 5 Elemente anzuzeigen beim Laden.

Das funktioniert aber sicher, dass Sie sie haben zwicken einige was:)

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>

javascript: 

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

Draht jquery für Ereignis: 

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

Ich schrieb ein hideMaxListItems Plugin, das sein kann, was Sie suchen. Sie können die maximale Anzahl der Listenelemente, Animationsgeschwindigkeit für die Dia-Animation eingestellt und zeigen / Schaltfläche HTML kollabieren. Die Dia-Animation wird sequentiell per Listenelement erfolgt, wodurch eine glatte Animation zu geben.

http: //www.joshuawinn .com / Maximum-list-Artikel-jquery-hide-after-x-number-Kugeln /

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top