Как выбрать первого ребенка с помощью jQuery?

Как выбрать первый div в этих divs (тот, с id=div1) использование первых дочерних селекторов? 

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>
32
children javascript jquery

4 ответов

попробовать с: $('.onediv').eq(0)

демо jsBin

из демки: другие примеры селекторы и методы нацеливание на первый LI unside an UL:

.eq() способ: $('li').eq(0)
:eq() селектор:  $('li:eq(0)')
.first() способ: $('li').first()
:first селектор: $('li:first')
:first-child селектор: $('li:first-child')
:lt() селектор: $('li:lt(1)')
:nth-child() селектор: $('li:nth-child(1)')

jQ + JS:

Array.slice() способ: $('li').slice(0,1)

вы также можете использовать [i] чтобы получить JS HTMLelement индекс из jQuery el. (array) коллекция, например:

$('li')[0]

теперь, когда у вас есть представление элемента JS, вы должны использовать собственные методы JS, например:

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

или можете (не - это плохой дизайн) оберните его обратно в объект jQuery 

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

или вы можете просто обратиться к id напрямую:

$('#div1');

как было предложено, вам может быть лучше использовать дочерний селектор:

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

если вы не есть использовать first-child, вы могли бы использовать :first как и предлагалось, или $('div.alldivs').children(0).

18

использовать :first-child селектор.

в вашем примере...

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

это также будет соответствовать любым первым дочерним потомкам, которые соответствуют критериям выбора.

пока :first соответствует только одному элементу,:first-child селектор может соответствовать более чем одному: по одному для каждого родителя. Это эквивалентно :nth-child(1).

для первого совпадающего только используйте :first селектор.

кроме того, Феликс Клинг предложил использовать прямой потомок селектора чтобы получить только прямые дети...

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

как упоминал @Roko, вы можете сделать это несколькими способами.

1.С помощью jQuery селектор первого ребенка-SnoopCode

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

  1. используя jQuery эквалайзер селектор-SnoopCode

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

  2. используя селектор идентификатора jQuery-SnoopCode

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