場で私のクラスにCSSクラスを置き換える

Question

私はこの

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

ようなHTMLをレンダリングすることだし、ページのロードに私はmyClass

でfa fa-angle-rightを交換したいので、私は

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

はデモ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'); 
}) 

Answer 3

より良い解決策は、一度だけのDOMにアクセスする必要があります。

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

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

<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>

Answer 4

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