循环通过单选按钮并更改最近的div,jquery上的背景颜色

时间:2012-07-02 23:25:08

标签: javascript jquery html

我有一个6 x 8网格,基本上是同名“tselect”下的单选按钮。当页面加载时,我希望它们都运行类似于这个的命令

$(this).closest('div').addClass('highlight', 300);

通过在顶部添加新的div类,基本上更改最近div的背景颜色。我尝试执行for循环来完成所有这些操作,但是jquery命令没有执行。有什么想法吗?

编辑:添加代码......

<div id="sch_cal">
                <div id="sch_cal_column">
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:40am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:40am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">10:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">10:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                </div>

2 个答案:

答案 0 :(得分:2)

如果您需要突出显示最近的div,可能需要以下内容:

$(this).closest('div').effect("highlight", {}, 300);

如果您想更改背景颜色,可以尝试:

$(this).closest('div').css( "background-color" , "red" )  

$(this).closest('div').addClass('highlight');

addClass不会将第二个参数作为整数。

答案 1 :(得分:1)

应该是

$('input[type="radio"].ctime').closest('div').addClass('highlight');

DEMO.

您有多个具有相同ID sch_cal_rowsch_cal_time的元素无效,ID应该是唯一的。