我有以下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后的样子:
如何让每个班级拥有自己独特的ID?
答案 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
元素