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)

demo jsBin

来自演示： 选择器和方法的其他示例，针对第一个LI取消UL：

.eq() Method: $('li').eq(0)
  :eq() selector: $('li:eq(0)')
  .first() Method $('li').first()
  :first selector: $('li:first')
  :first-child selector: $('li:first-child')
  :lt() selector:$('li:lt(1)')
  :nth-child() selector:$('li:nth-child(1)')

jQ + JS：

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

您还可以使用[i]从jQuery el中获取JS HTMLelement 索引。（数组）集合，例如：

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

或者你可以直接引用id：

$('#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选择器。

或者，Felix Kling建议使用direct descendent selector仅获得直接孩子......

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

Answer 4

正如@Roko所提到的，你可以通过多种方式做到这一点。

1.使用jQuery first-child selector - SnoopCode

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

使用jQuery eq Selector - SnoopCode

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

使用jQuery Id Selector - SnoopCode

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

Answer 5

嗨，我们可以在jQuery中使用默认方法“ first”

这里有一些例子：

当您要为第一个div添加班级

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

如果要更改，请删除“ onediv”类，仅将其添加到第一个孩子

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

如何用jQuery选择第一个孩子？

5 个答案:

demo jsBin