JQuery Hide li on first of month

Я человек css, а не прогамер, поэтому jquery немного за меня, так что извиняйтесь, если это действительно так просто, но я не могу попасть туда. У меня есть UL с 1 ли за месяц. Мне нужна функция, чтобы скрыть все лики в зависимости от месяца. То есть, я хочу, чтобы все ли исчезли, как только месяц, который они представляют, прошёл, так что остаются только текущие и будущие месяцы.JQuery Hide li on first of month

Видя, как есть один литий в месяц, и они в порядке, это произошло со мной простым способом будет получить текущий месяц как число -

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

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

И сравните п к индексу li и скрыть его, если оно меньше. Что-то вроде этого

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

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

Но я не могу заставить его работать для каждого li - думаю, мне нужно хранить их в массиве?

источник

2016-03-22 Guillaume Roberts

опечатка или ошибка? '$ ('li) .hide();' (Должно иметь заключительную цитату.) – Quotidian

'$ (" li "). each (function (idx, item) {item.toggle (idx teran

@teran ooh! Мне нравится этот. Это нужно, чтобы объект был добавлен в объект jQuery. 'item' в этом контексте является простым узлом. https://jsfiddle.net/d87pmr1c/ –

я не понял, что именно вы просите, но я надеюсь, что это то, что вы ищете ....

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

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

источник

2016-03-22 15:15:02

В моем собственном опыте, лучше передавать по значению элемента списка , а не по порядку вашего списка и индексов. Вы не отправляли, как именно элементы списка показывают даты, так что я написал и простой (и не очень элегантно) пример, который продемонстрирует, как можно достичь этой проверки Вэл и скрыть дату:

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

источник

2016-03-22 15:29:09

Извините, должен был объяснить о HTML - li содержит много разметки, поэтому я не могу использовать их ценность. Я мог бы присвоить им идентификационные данные или значения индекса данных. –

Хорошо, поэтому мое решение должно работать, я думаю, если вы настроите «if», чтобы проверить свой идентификатор вместо текста –

нормально, ответ от комментариев. Существует много способов достижения желаемого результата.

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

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

вы можете перебирать коллекцию li и скрыть необходимые элементы, используйте toggle для установки dsiplay в none, или вы можете remove() элементы, или addClass("hidden") или toggleClass("hidden", ...) и так далее ..

или вы можете построить необходимые селекторные и hide\remove\toggle элементы:

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

, но, если вам нужно, чтобы скрыть что-то на странице load, imho, лучше не отображать его на стороне сервера вообще.

обновление: добавил фрагмент кода demostrate:

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>

источник

2016-03-22 15:42:00 teran

Как и простота этого, спасибо. Но когда я пытаюсь это сделать, он перебирает и скрывает всю личность их индекса. –

@GuillaumeRoberts Я добавил фрагмент кода, например – teran

JQuery Hide li on first of month

ответ

Смежные вопросы