JQuery - 如果元素有 class 添加 class
JQuery - add class if element has class
我想将 class 添加到具有 class 'alignleft' 的元素。我的代码:
$(document).ready(function () {
if($('.foto').children().hasClass('alignleft')){
$(this).addClass('animated bounceInLeft');
}
});
它不起作用,我不知道为什么。但是,如果我使用 $('.foto').children().addClass('animated bounceInLeft');
,它会将 class 应用于所有具有 class 'alignleft' 的子元素。所以问题可能出在 $(this)
?
您可以使用 class 选择器定位元素,然后向它们添加 classes:
$('.foto .alignleft').addClass('animated bounceInLeft');
您不能使用 this
,它引用 window 对象。而是使用 class 作为 children()
方法中的选择器。
$('.foto').children('.alignleft').addClass('animated bounceInLeft');
$('.foto > .alignleft').addClass('animated bounceInLeft');
尝试
$(document).ready(function() {
var elem = $('.foto .alignleft');
if (elem) {
elem.addClass('animated bounceInLeft');
}
});
或
$(document).ready(function() {
$('.foto .alignleft').addClass('animated bounceInLeft');
});
$(document).ready(function() {
var elem = $('.foto .alignleft');
if (elem) {
elem.addClass('animated bounceInLeft');
}
});
.alignleft{color:red;}
.alignright{color:green;}
.animated{background:lightgrey;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foto">
<div class="alignleft">
Div A
</div>
<div class="alignleft">
Div B
</div>
<div class="alignright">
Div C
</div>
<div class="alignright">
Div D
</div>
</div>
我想将 class 添加到具有 class 'alignleft' 的元素。我的代码:
$(document).ready(function () {
if($('.foto').children().hasClass('alignleft')){
$(this).addClass('animated bounceInLeft');
}
});
它不起作用,我不知道为什么。但是,如果我使用 $('.foto').children().addClass('animated bounceInLeft');
,它会将 class 应用于所有具有 class 'alignleft' 的子元素。所以问题可能出在 $(this)
?
您可以使用 class 选择器定位元素,然后向它们添加 classes:
$('.foto .alignleft').addClass('animated bounceInLeft');
您不能使用 this
,它引用 window 对象。而是使用 class 作为 children()
方法中的选择器。
$('.foto').children('.alignleft').addClass('animated bounceInLeft');
$('.foto > .alignleft').addClass('animated bounceInLeft');
尝试
$(document).ready(function() {
var elem = $('.foto .alignleft');
if (elem) {
elem.addClass('animated bounceInLeft');
}
});
或
$(document).ready(function() {
$('.foto .alignleft').addClass('animated bounceInLeft');
});
$(document).ready(function() {
var elem = $('.foto .alignleft');
if (elem) {
elem.addClass('animated bounceInLeft');
}
});
.alignleft{color:red;}
.alignright{color:green;}
.animated{background:lightgrey;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foto">
<div class="alignleft">
Div A
</div>
<div class="alignleft">
Div B
</div>
<div class="alignright">
Div C
</div>
<div class="alignright">
Div D
</div>
</div>