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

Question

Как выбрать первый 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>

Answer 1

Попробуйте с: $('.onediv').eq(0)

демоверсия jsBin

Из демо-версии: Другие примеры селекторов и методов , нацеленных на первый LI против 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 index из jQuery el. (массив) коллекция, например:

$('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

Answer 2

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

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

$('#div1');

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

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

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

Answer 3

Используйте селектор :first-child.

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

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

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

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

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

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

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

Answer 4

Привет, мы можем использовать метод по умолчанию «first» в jQuery

Вот несколько примеров:

Когда вы хотите добавить класс для первого div

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

Когда выхочу изменить удалить класс "onediv" и добавить только к первому потомку

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

Answer 5

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

1.Использование селектора первого ребенка jQuery - SnoopCode

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

2. Использование jQuery eq Selector - SnoopCode

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

3. Использование JQuery Id Selector - SnoopCode

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