Question

我是一个css的人，而不是一个程序员，所以jquery有点超出我，所以道歉，如果这很简单，但我无法到达那里。我每个月只有一个李。我希望根据月份隐藏所有li的功能。也就是说，我希望所有的一旦他们所代表的月份消失，所以只剩下当前和未来的月份。

看到每个月只有一个li并且他们按顺序排列，对我来说一个简单的方法就是将当月作为一个数字 -

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

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

将n与li的索引进行比较，如果它更小则隐藏它。像这样的东西

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

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

但是我不能让它为每个li工作 - 我想我需要将它们存储在一个数组中？

Answer 1

好的，回答评论。有很多方法可以达到预期的效果。

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

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

您可以迭代li的集合并隐藏所需的元素，使用toggle将dsiplay设置为none，或者remove()个元素，或{ {1}}或addClass("hidden")等等..

或者您可以构建必需的选择器和toggleClass("hidden", ...)元素：

hide\remove\toggle

但是，如果你需要隐藏页面加载的东西，imho，最好不要在服务器端渲染它。

<强>更新：添加了代码片段以进行演示：

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

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

Answer 2

我没有得到你究竟要问的是什么，但我希望这是你正在寻找的......

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

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

Answer 3

根据我自己的经验，最好在列表项值上进行中继而不是列表和索引的顺序。你没有准确发布你的列表项如何显示日期，所以我编写了简单（并不是非常优雅）的例子来演示如何通过val实现这个检查并隐藏日期：

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

Jquery在一个月的时候隐藏了李

3 个答案: