javascript - 在今天改变 UL 背景

Question

我有一个简单的类(class)日历，如果是一周中的那一天，我希望日期列有所不同。

例如如果是星期三，则星期三列不同

我一直在玩，但无济于事，并在论坛中搜索。我已经到了这一点。

我愿意接受任何新方法。谢谢。

脚本

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> 
<script>
$('.fc-today').prevAll('ul').css('backgroundColor','yellow');
$('.fc-today').parent().prevAll().find('ul').css('backgroundColor','yellow');
</script>

HTML

<div class="calendar-daycontent fc-mon">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-tue">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-wed">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-thu">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-fri">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sat">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sun">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

CSS

div.calendar-daycontent {
float : left ;
width : 138px ;
margin : 1px ;
display : block ;
}

    div.calendar-daycontent ul {
    float : left ;
    width : 100% ;
    display : block ;
    margin-bottom : 2px ;
    }

    .fc-mon ul {background-color:Red;}
    .fc-tue ul {background-color:green;}
    .fc-wed ul {background-color:blue;}
    .fc-thu ul {background-color:Red;}
    .fc-fri ul {background-color:Red;}
    .fc-sat ul {background-color:green;}
    .fc-sun ul {background-color:blue;}

    .fc-today ul {}

    div.calendar-daycontent ul a:link, div.calendar-daycontent ul a:visited {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    }

    div.calendar-daycontent ul a:hover {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    background-color : #6bb925 ;
    -o-transition : .3s ;
    -ms-transition : .3s ;
    -moz-transition : .3s ;
    -webkit-transition : .3s;
    transition : .3s ;
    }

        div.calendar-daycontent ul li {
        float : left ;
        width : 100% ;
        display : block ;
        padding : 2px 0px ;
        color : #151515 ;
        text-align : center ;
        }

        div.calendar-daycontent ul li.class-header  {
        font-size : 15px ;
        font-weight : 800 ;
        text-transform : uppercase ;
        font-style : italic;
        color : #6bb925 ;
        margin-top : 2px ;
        margin-bottom : 1px ;
        }

            div.calendar-daycontent ul:hover li.class-header {
            color : #fff ;
            }

        div.calendar-daycontent ul li.class-inst {
        font-size : 12px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-time {
        font-size : 11px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-room {
        font-size : 11px ;
        }

Answer 1

尝试使用 Date 获取当前星期几:

$(function(){
  var day = new Date().getDay();
  day = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"][day];
  $('div.calendar-daycontent.fc-' + day + ' ul').css({'background':'yellow'});
});