jquery - 子供にクラスを追加する-jquery

Question

私はこのhtmlコードを持っています：

<div class="rotation">
  <ul>
    <li><img src="..." alt="" /></li>
    <li><img src="..." alt="" /></li>
    <li><img src="..." alt="" /></li>
  </ul>
</div>

ulにクラスを追加する必要があります。ul、liはクラスなしで生成されるため、jqueryを使用して追加します。
ulタグはである必要があるとしましょう<ul class="image_rotation">。どうすればいいですか？

Answer 1

jQueryのaddClassメソッドについてはこちらをご覧ください。

$('.rotation ul').addClass('image_rotation');

上記のコードは、クラスを持つ任意の要素の子孫であるimage_rotationすべてにクラスを追加します。ulrotation

クラスが、の要素の直接の子ulであるsのみをターゲットにする場合は、子セレクター（）を使用します。rotation>

$('.rotation > ul').addClass('image_rotation');

1つの.rotation要素に対してのみこれを実行する場合は、IDを指定して、そのように選択する必要があります。例えば：

$('#rotation ul');

と

<div id="rotation" class="rotation">
    <ul>
        <li><img src="..." alt="" /></li>
        <li><img src="..." alt="" /></li>
        <li><img src="..." alt="" /></li>
    </ul>
</div>

Answer 2

シンプルに保つことをお勧めします。

$('div.rotation ul').addClass('image_rotation');

または、ul要素内に複数の要素があるdiv.rotation場合は、最初の要素を指定できますul。

$('div.rotation ul:first').addClass('image_rotation');

最後ul：

$('div.rotation ul:last').addClass('image_rotation');

または、ul任意のゼロベースのインデックス、たとえば3番目ul（インデックスは2）：

$('div.rotation ul:eq(2)').addClass('image_rotation');

また：

$('div.rotation ul').eq(2).addClass('image_rotation');

または、直接の子（したがって、ul他の要素にネストされた要素はありません）：

$('div.rotation > ul').addClass('image_rotation');

参照：

• addClass()。
• eq()。
• :eqセレクター。
• :firstセレクター。
• :lastセレクター。

Answer 3

必要なのは、divでULを見つけて、それにクラスを割り当てることだけです。このデモでそれを見ることができますが、HTMLのコードは以下のとおりです

$(document).ready(function(){
    $('ul','div.rotation').each(function(index){
        $(this).addClass('image_rotation');
    });
});​

Answer 4

非常に簡単です。次のようにしてください。

$(document).ready(function(){
    $('div.rotation ul').addClass('image_rotation');
});

Answer 5

$(".rotation ul").attr("class","image_rotation");

Answer 6

$(".rotation").children("ul").addClass( "MyClass");