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');

或使用child selector(>)

$('.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>