<c:forEach items="${list}" var="item">
<div class="block" id="${item.id}" data-num="${item.itemRead}">
<a id="${item.id}"
href="javascript:showFeedItem('${item.id}','${item.itemRead}');">
</div>
</c:forEach>
Why do I have undefinded attribute name data-num when creating a new data attribute data-num
? jQuery:
$(document).ready(function(){
$('.block').each(function(i, obj) {
if($(this).attr("data-num")=="0"){
//need to style a inside this
$(this).css("background-color","black");
}
});
});
How to target a
like this:
$('.block[id="' + id + '"] a').css('color', 'black');
but using $(this).css("background-color","black");
?
Pass this
as the context to jQuery selector
$(document).ready(function () {
$('.block').each(function (i, obj) {
if ($(this).attr("data-num") == "0") {
//need to style a inside this
$('a', this).css("background-color", "black");
//or $(this).find('a').css("background-color", "black");
}
});
});
You can also shorten this to
$(document).ready(function () {
$('.block[data-num="0"] a').css("background-color", "black");
});
如果要获取this
代码的直接后代(如代码中的代码),则可以使用.children()方法。
$(this).children(a).css("background-color","black");
I guess you need to change this:
<c:forEach items="${list}" var="item">
<div class="block" id="${item.id}" data-num="${item.itemRead}">
<a href="javascript:showFeedItem('${item.id}','${item.itemRead}');">
</div>
</c:forEach>
removed id="${item.id}"
from the anchor. What seemed to me that you are adding same ids to different items in a single page but it has to be unique for each element.
Now in the js you have to use .find()
to style the anchor and style it:
$(document).ready(function(){
$('.block').each(function(i, obj) {
if($(this).attr("data-num")=="0"){ // or if($(this).data("num")=="0"){
$(this).find('a').css("background","black");
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.