Question

我正在渲染像这样的HTML

<div class="btn btn-pagination">
   <i class="fa fa-angle-right"></i>
</div>

并在页面加载时，我想将fa fa-angle-right替换为myClass

所以我试过

$(document).ready(function () {
   $('.btn.btn-pagination').children($('.fa.fa-angle-right').removeClass());
   $('.btn.btn-pagination').children().addClass('myClass');
})

这不起作用，所以我在这里做错了什么？

Answer 1

虽然你的代码应该可行但是更好的方法（使用更好的选择器和jQuery链接）如下所示。

试试这个： -

$(document).ready(function () {
   $('.btn.btn-pagination').children('.fa.fa-angle-right').removeClass().addClass('myClass'); 
});

DEMO

OR

$(document).ready(function () {
   $('div.btn.btn-pagination > i.fa.fa-angle-right').removeClass().addClass('myClass'); 
});

DEMO

Answer 2

更好的解决方案应该只是访问dom一次。

＆＃13;

jQuery(document).ready(function($) {
  return $('.btn.btn-pagination .fa.fa-angle-right')
    .removeClass()
    .addClass('foobaz')
  ;
});

＆＃13;

.foobaz { background: red; width: 200px; height: 100px; margin: 0 auto; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-pagination">
  <div class="fa fa-angle-right"></div>
</div>

＆＃13;

Answer 3

<强> HTML

<div class="btn btn-pagination">
   <i class="fa fa-angle-right"></i>
</div>

<强> JS

$(document).ready(function(){
    $(".fa .fa-angle-right").addClass('myClass');
     $(".fa .fa-angle-right").removeClass('.fa-angle-right');
    });

Answer 4

参考演示here。

请在下面找到代码：

<强> HTML：

<div class="btn btn-pagination">
  <i class="fa fa-angle-right"></i>
</div>

<强> JS：

$(document).ready(function() {
  $('.btn.btn-pagination > i').attr('class', 'myClass');
})

用我的班级替换css类

4 个答案: