web-dev-qa-db-ja.com

jQueryで最初の子を選択する方法は？

これらのdivの最初のdiv（id=div1）最初の子セレクターを使用しますか？

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>
javascriptjquerychildren
34
sameold

試してください：$('.onediv').eq(0)

デモjsBin

デモから：selectorsおよびmethodsの他の例は、LI以外の最初のULを対象としています。

.eq()メソッド：$('li').eq(0)
:eq()セレクター：$('li:eq(0)')
.first()メソッド$('li').first()
_:first_セレクター：$('li:first')
_:first-child_セレクター：$('li:first-child')
:lt()selector：$('li:lt(1)')
:nth-child()selector：$('li:nth-child(1)')

jQ + JS：

Array.slice()メソッド：$('li').slice(0,1)

_[i]_を使用して、jQuery elからJS HTMLelementindexを取得することもできます。 （配列）のようなコレクション：

_$('li')[0]
_

jS要素表現ができたので、JSネイティブメソッドを使用する必要があります。例：

_$('li')[0].className = 'active'; // Adds class "active" to the first LI in the DOM
_

またはcan（しないでください-デザインが悪いです）jQueryオブジェクトに折り返します

_$( $('li')[0] ).addClass('active'); // Don't. Use .eq() instead
_
45
Roko C. Buljan
_$('div.alldivs :first-child');
_

または、IDを直接参照することもできます。

_$('#div1');
_

提案されているように、子セレクターを使用した方がよい場合があります。

_$('div.alldivs > div:first-child')
_

haveを使用して_first-child_を使用しない場合は、_:first_も推奨されているように使用できます。または$('div.alldivs').children(0)を使用できます。

19
Frederik Wordenskjold

_:first-child_ セレクターを使用します。

あなたの例では...

_$('div.alldivs div:first-child')
_

これは、選択基準を満たす最初の子孫にも一致します。

_:first_は1つの要素のみに一致しますが、_:first-child_セレクターは複数の親に対応できます。これは:nth-child(1)と同等です。

最初に一致したonlyには、 _:first_ セレクターを使用します。

または、 Felix Klingdirect descendent selector を使用して直接の子のみを取得することをお勧めします...

_$('div.alldivs > div:first-child')
_
9
alex

@Rokoが述べたように、これは複数の方法で行うことができます。

1. jQueryの最初の子セレクター-SnoopCode の使用

   $(document).ready(function(){
    $(".alldivs onediv:first-child").css("background-color","yellow");
        }

  1. jQuery eq Selector-SnoopCode の使用

     $( "body" ).find( "onediv" ).eq(1).addClass( "red" );

  2. jQuery Id Selector-SnoopCode の使用

       $(document).ready(function(){
     $("#div1").css("background-color: red;");
   });
0
Prabhakar

こんにちは、jQueryでデフォルトのメソッド「first」を使用できます

ここにいくつかの例があります：

最初のdivにクラスを追加する場合

  $('.alldivs div').first().addClass('active');

変更して「onediv」クラスを削除し、最初の子のみに追加する場合

   $('.alldivs div').removeClass('onediv').first().addClass('onediv');
0
Krishnamoorthy Acharya