jquery - jqueryで子プロパティを一度に追加するにはどうすればよいですか?

Question

jqueryで子プロパティを一度に追加するにはどうすればよいですか? 以下のコードなどを試していますが、うまくいきません。

CSS:

.item > ul
{
  margin:0px;
  padding:0px;
}
.item > span
{
  color:gray;
}
.item > span:hover
{
  color:blue;
}

HTML:

<div class="container">
   <span>Text</span>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
   </ul>
</div>

Jクエリ:

$(".container").addClass("item");

score 0 · Accepted Answer

私はあなたが探しているだけだと思います：

$(".container").children().addClass("item");

直接の子だけでなく、すべての子に適用したい場合は、再帰的に行う必要があります。

score 0 · Accepted Answer

このコードはいつ実行されますか。ページ (DOM) がロードされた後に chrome コンソールまたは firebug を使用して実行すると、変更が表示されるはずです。それ以外の場合は、これをページのスクリプト本文の Ready ハンドラーに配置する必要があります

$(document).ready(function() {
  // Handler for .ready() called.
});

問題は、DOM がロードされる前に JS が起動することが多いため、セレクターとして使用しているこの要素とそのクラスがまだクエリに存在しないことです。

score 0 · Accepted Answer

item クラスをすべての子に追加したい場合、質問は実際には明確ではありません。

もしそうなら、これはそれを行う1つの方法です。

$('.container').children().each(function(){
    if($(this).has('li'))
       $(this).children().addClass('item');
    $(this).addClass('item');
});

これにより、UL 内の LI を含むすべての子に item-class が追加されます。:)

このティンカーを参照してください

3 に答える 3