如何避免使用JQuery更改所有id?

时间:2014-01-11 12:53:41

标签: javascript jquery html

我有以下HTML:

<div class="date_container" id="date_container_0" >
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
                <div class="day">
            <div class="date">

            </div><!--end date--> 
        </div><!--end day--> 
            <div class="nav_buttons">
        <button class="previous">Previous</button>
        <button class="next">Next</button>
    </div><!--end nav_buttons--> 
</div><!--end date_container--> 

我想动态地为每个day类添加id。这是我正在使用的代码:

    $(".date").each(function(i){

    var weekday=new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";



    var nDate = new Date(); 
    var mDate = new Date(nDate).setDate(nDate.getDate()+i); 
    var d = new Date(mDate);
    var month = d.getMonth() + 1; 
    var day = d.getDate();
    var wDay = weekday[d.getDay()]; 
    var year = d.getFullYear();

    if(day <= 9){
        day = "0" + day; 
    }

    $(this).append('<h4>'+month+'/'+day+'/'+year+'</h4>');
    $(this).append('<h6>'+wDay+'</h6>');
    console.log("Month: "+month);
    console.log("day: "+day);
    console.log("Year: "+year);

    $(this).parent().parent().find(".day").attr("id", "_"+month+"-"+day+"-"+year); 
}); 

上面的代码也是将日期添加到日期元素。

问题是,当添加ID时,它们都是相同的。更具体地说,它们与上一个day类相同。看起来我正在使用的代码是更新所有id,而不仅仅是我正在使用的元素。

以下是运行Javascript后的样子:

enter image description here

如何让每个班级拥有自己独特的ID?

1 个答案:

答案 0 :(得分:4)

试试这个:

$(this).parent().attr("id", "_"+month+"-"+day+"-"+year);

而不是

$(this).parent().parent().find(".day").attr("id", "_"+month+"-"+day+"-"+year);

使用$(this).parent().parent().find(".day"),您可以在date_container中找到所有 .day元素