Jquery Verstecken li am Anfang des Monats

Ich bin ein css Person nicht ein Progammer so Jquery ist ein bisschen jenseits von mir so entschuldigt, wenn das wirklich einfach ist, aber ich kann nicht dorthin gelangen. Ich habe eine UL mit einer li pro Monat. Ich möchte eine Funktion, um alle li basierend auf dem Monat zu verbergen. Dh ich möchte, dass alle li verschwinden, sobald der Monat, den sie repräsentieren, vergangen ist, so dass nur die aktuellen und zukünftigen Monate übrig bleiben.Jquery Verstecken li am Anfang des Monats

Sehen als es gibt eine li pro Monat und sie sind in Ordnung, es fiel mir einen eine einfache Möglichkeit wäre die aktuelle Monat als Zahl zu bekommen -

<script type="text/javascript"> 
$(document).ready(function() { 

var d = new Date(); 
var n = d.getMonth();

und n den Index des Vergleich li, und verstecke es, wenn es kleiner ist. So etwas wie das

var listItem = $("li"); 
alert("Index: " + $("li").index(listItem) ); 

if (n > listItem) { 
$('li).hide(); 
}

Aber ich kann es nicht für jeden li arbeiten - denke ich muss ich sie in einem Array speichern?

Quelle

2016-03-22 Guillaume Roberts

Tippfehler oder Fehler? '$ ('li) .hide();' (Sollte ein schließendes Zitat haben.) – Quotidian

'$ (" li "). je (Funktion (idx, item) {item.toggle (idx teran

@teran ooh! Ich mag das. Es muss jedoch ein Objekt in ein jQuery-Objekt geworfen werden, damit es funktioniert. "item" ist in diesem Zusammenhang ein einfacher Knoten. https://jsfiddle.net/d87pmr1c/ –

Ich habe nicht, was genau Sie fragen, aber ich hoffe, das ist, was Sie suchen ....

<ul id="moths"> 
<li>Jan</li> 
...... 
</li>Dec</li> 
</li> 

<script> 
function hideCurrentMonth(selector){ 
    $(selector+' li').eq(new Date().getMonth()).prevAll().hide(); 
} 
</script>

Quelle

2016-03-22 15:15:02

In meiner eigenen Erfahrung ist es besser, auf der Liste Elementwert Relais anstatt in der Reihenfolge Ihrer Liste und Indizes. Sie nicht schreiben, genau wie Listenelemente die Daten zeigen, so schrieb ich und einfach (und nicht wirklich elegant) Beispiel, das zeigt, wie Sie diese Überprüfung durch val erreichen können und verstecken das Datum:

<body> 
    <ul id="monthsList"> 
     <li>03</li> 
    </ul> 
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script> 
var monthsElements = $("#monthsList").children(); 

var currMonth = "03"; // I saw that you already know how to use new Date() to get the current month, im just not sure 
// how you represent your months in the html li's 

for (var i = 0; i < monthsElements.length ; i++) 
{ 
var currMonthLi = monthsElements[i]; 

if ($(currMonthLi).text() == currMonth) 
{ 
    $(currMonthLi).hide(); 
} 

} 
</script>

Quelle

2016-03-22 15:29:09

Entschuldigung, sollte über den HTML erklärt haben - die li enthalten viele Markup, so kann ich nicht einfach ihren Wert verwenden. Ich könnte ihnen IDs oder Datenindexwerte zuweisen. –

Okay, also meine Lösung sollte funktionieren Ich denke, wenn Sie das "if" anpassen, um ihre ID anstelle von Text zu überprüfen –

ok, Antwort von Kommentaren. Es gibt viele Möglichkeiten, das gewünschte Ergebnis zu erzielen.

$(function(){ 
    var mIdx = new Date().getMonth(); 

    $("ul#months li").each(
      function(idx, item){ 
       $(item).toggle(idx >= mIdx); 
      }); 
}

Sie Sammlung von li laufen kann und die erforderlichen Elemente auszublenden, verwenden toggledsiplay-none zu setzen, oder Sie können remove() Elemente oder addClass("hidden") oder toggleClass("hidden", ...) und so weiter ..

oder Sie können bauen erforderlich Selektor und hide\remove\toggle Elemente:

$("li:lt(" + mIdx + ')').hide();

aber, wenn Sie etwas auf Seite zu verstecken brauchen load, imho, besser rendern es nicht auf serverseite.

Update: Code-Snippet hinzugefügt verdeutlichen sollen:

var mIdx = new Date().getMonth(); 
 
$("ul#months li:lt(" + mIdx + ')').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="months"> 
 
    <li>January</li> 
 
    <li>February</li> 
 
    <li>March</li> 
 
    <li>April</li> 
 
    <li>May</li> 
 
    <li>June</li> 
 
    <li>July</li> 
 
    <li>August</li> 
 
    <li>September</li> 
 
    <li>October</li> 
 
    <li>November</li> 
 
    <li>December</li> 
 
</ul>

Quelle

2016-03-22 15:42:00 teran

Wie die Einfachheit dieser, danke. Aber wenn ich es versuche, es durchläuft und alle li-Regardess ihres Indexwerts verbirgt. –

@GuillaumeRoberts Ich habe Code-Snippet zum Beispiel hinzugefügt – teran

Jquery Verstecken li am Anfang des Monats

Antwort

Verwandte Themen