条件.addClass()

时间:2012-04-26 23:33:41

标签: jquery tabs jquery-tools addclass

我无法想象我的生活。我需要为一系列7个选项卡(基于星期几),。。,。今天和.future

提供三个类。

我有.today工作奇妙地使用.getDay(),但是我很难将之前的所有li分配给.past,以及之后来的所有li。今天来.future

HTML:

<ul class="days-of-the-week tabs clearfix">
  <li class="sunday"><span><a href="#">Sunday</a></span></li>
  <li class="monday"><span><a href="#">Monday</a></span></li>
  <li class="tuesday"><span><a href="#">Tuesday</a></span></li>
  <li class="wednesday"><span><a href="#">Wednesday</a></span></li>
  <li class="thursday"><span><a href="#">Thursday</a></span></li>
  <li class="friday"><span><a href="#">Friday</a></span></li>
  <li class="saturday"><span><a href="#">Saturday</a></span></li>
</ul>

jQuery的:

// Add class .today to the correct day-of-week tab
$('ul.days-of-the-week li:eq(' + new Date().getDay() + ')').addClass('today');

提前致谢!

3 个答案:

答案 0 :(得分:4)

您可以使用prevAll()获取当前所有元素的所有兄弟姐妹,并使用nextAll()获取以下所有兄弟姐妹。

prevAll的文档:http://api.jquery.com/prevAll/

nextAll的文档:http://api.jquery.com/nextAll/

使用这些很容易。 JSFiddle:http://jsfiddle.net/qYt2p/

var today = $('ul.days-of-the-week li:eq(' + new Date().getDay() + ')').addClass('today');
today.prevAll().addClass("past");
today.nextAll().addClass("future");​

答案 1 :(得分:1)

我认为您正在寻找netxAll和prevAll:

var today = $('ul.days-of-the-week li:eq(' + new Date().getDay() + ')');
today.prevAll().addClass('past');
today.addClass('today');
today.nextAll().addClass('future');

答案 2 :(得分:0)

$('ul.days-of-the-week li').each(function() {
    var c = new Date().getDay() <= $(this).index() ? new Date().getDay() == $(this).index() ? 'today' : 'future' : 'past';
    $(this).addClass(c);
});