2

jQuery を使用して最初の div にクラスを追加する方法。

次のコードを試してみましたが、うまくいきません。多分私は何かを逃しています。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script>
$('.item')
    .eq(0).addClass('first').end()
    .eq(-1).addClass('last').end();
</script>
<style type="text/css">
.first, .last{
background-color:#0099FF;
}
</style>
</head>
<body>
<div class="item">aaa</div>
<div class="item">bbb</div>
<div class="item">ccc</div>
<div class="item">ddd</div>
<div class="item">eee</div>
</body>
</html>

編集: みんなありがとう、残りの DIV にクラスを追加する方法はありますか?

4

10 に答える 10

5

マークアップの準備が整う前にコードを実行しています。コードをラップする

// document ready short-style
$(function() {

});
于 2012-10-09T10:46:27.033 に答える
5

試す

$(document).ready(function() {
  $('.item:first-child').addClass('first');
});
于 2012-10-09T10:44:53.077 に答える
3

<script></script>コードは正しいですが、DOM の準備が整う前に実行されます。を の前の最後の行に移動してください</body>。

残りの要素にクラスを追加するには、これを行うことができます (Vision のコメントから)

$(".item:not(:first,:last)").addClass("differentClass");
于 2012-10-09T10:45:54.093 に答える
2 
$(".item :first").addClass('first');
于 2012-10-09T10:45:16.380 に答える
2

ここにjQueryコードがあります

<script>
$(document).ready(function(){
$('body .item:first').addClass('YOUR CLASS VALUE');
});
<script>

よろしく、 http://www.santoshkori.com

于 2012-10-10T10:55:22.277 に答える
2

あなたはこのコードを使用します

$(function(){
   $(".item:first-child").addClass("anyclass");
})

or
  $("div:first-child").addClass("anyclass");
于 2012-10-09T10:58:59.017 に答える
2

コードは、DOM が完全にロードされたときに実行する必要があります。したがって、$(document).ready() を使用します。

スクリプトは、DOM 階層が完全に構築されるとすぐに実行できます。.ready() に渡されたハンドラーは、DOM の準備が整った後に実行されることが保証されているため、これは通常、他のすべてのイベント ハンドラーをアタッチして他の jQuery コードを実行するのに最適な場所です。

$(document).ready()の詳細をご覧ください。

以下のコードを確認してください。あなたがやりたいことを成し遂げるのに役立ちます。

   $(document).ready(function() {
          $('.item').first().addClass('first');
        });

そうしないと、DOM がロードされる前でも js が実行されます

$(".item:first").addClass('first');もうまくいきます。

デモもお試しください。

これがあなたを助けることを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう

于 2012-10-09T10:52:29.177 に答える
1

これを試して

JS コード

$(document).ready(function(){
   $('div.item')
     .eq(0).addClass('first').end()
     .eq(-1).addClass('last').end();
});

デモ

ノート

$(function() { ... })jQueryコード全体をラップするために使用する必要があります。

于 2012-10-09T10:52:35.620 に答える
1

ここでjsfiddleを参照してください

$(document).ready(function() {
    $('div:first').addClass('first');
});
于 2012-10-09T10:50:24.247 に答える
1

CSS3 ですが、ストレート CSS をいつでも使用できます。たとえば、現在の CSS を次のように置き換えることができます。

.item:nth-of-type(1), .item:nth-of-type(3)
{
   background-color:#0099FF;
}

jQueryだけが必要な場合は、次を試すことができます。

$('.item:first').addClass('first');
$('.item:last').addClass('last');
于 2012-10-09T10:56:15.303 に答える