it-swarm.com.de

Wie wählt man das erste Kind mit jQuery aus?

Wie wähle ich das erste Div in diesen Divs (das mit id=div1) mithilfe der ersten untergeordneten Selektoren aus? 

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

Versuchen Sie es mit: $('.onediv').eq(0)

demo jsBin

Aus der Demo: Weitere Beispiele für Selektoren und Methoden als Ziel für die erste LI, wobei eine UL nicht verwendet wird

.eq() Methode: $('li').eq(0)
:eq() Wahlschalter: $('li:eq(0)')
.first() Methode $('li').first()
:first Auswahl: $('li:first')
:first-child Auswahl: $('li:first-child')
:lt() Wahlschalter: $('li:lt(1)')
:nth-child() Wahlschalter: $('li:nth-child(1)')

jQ + JS:

Array.slice() Methode: $('li').slice(0,1)

sie können auch [i] verwenden, um die JS HTMLelementindex aus dem jQuery-Element zu holen. (Array-) Sammlung wie zB:

$('li')[0]

da Sie nun die JS-Elementrepräsentation haben, müssen Sie native JS-Methoden verwenden, z. B .:

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

oder Sie can (nicht - es ist schlechtes Design) packen es wieder in ein jQuery-Objekt 

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

Oder Sie können direkt auf die ID verweisen:

$('#div1');

Wie vorgeschlagen, können Sie besser die untergeordnete Auswahl verwenden:

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

Wenn Sie nicht verwenden, um first-child zu verwenden, können Sie :first wie ebenfalls vorgeschlagen oder $('div.alldivs').children(0) verwenden.

18

Verwenden Sie den Selektor :first-child .

In deinem Beispiel ...

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

Dies entspricht auch allen ersten untergeordneten Nachkommen, die die Auswahlkriterien erfüllen.

Während :first nur mit einem einzelnen Element übereinstimmt, kann der :first-child-Selektor mit mehreren übereinstimmen: einer für jedes übergeordnete Element. Dies ist äquivalent zu :nth-child(1).

Verwenden Sie für das erste übereinstimmende nur den Selektor :first .

Alternativ schlug Felix Kling die Verwendung des Direktabstiegsauswahl vor, um nur direkte Kinder zu erhalten ...

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

Wie @Roko erwähnt, können Sie dies auf verschiedene Arten tun.

1.Verwenden des jQuery First-Child-Selektors - SnoopCode

   $(document).ready(function(){
    $(".alldivs onediv:first-child").css("background-color","yellow");
        }
  1. Verwenden von jQuery eq Selector - SnoopCode

     $( "body" ).find( "onediv" ).eq(1).addClass( "red" );
    
  2. JQuery-Id-Auswahl verwenden - SnoopCode

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

Hallo, wir können die Standardmethode "first" in jQuery verwenden

Hier einige Beispiele:

Wenn Sie eine Klasse für das erste Div hinzufügen möchten

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

Wenn Sie die Klasse "onediv" entfernen und nur dem ersten Kind hinzufügen möchten

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