Question

我有这个标记：

<ul>
  <li> // this
    <ul>
      <li>
        <div></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </li>
  <li> // this
    <ul>
      <li>
        <div></div>
      </li>
      <li>
        <div></div>
      </li>
    </ul>
  </li>
</ul>

以我的风格，我有这个：

.main_menu ul > li {
   // some style
}

这给了我一些样式，只有那棵树中的第一个li，而不是它的li个。{1}}。所以，我的问题是如何使用jQuery设置它，当我尝试使用$('.main_menu ul > li');时它不起作用。我想我需要一些这样的写作：

$('.main_menu ul').each().first().child();

但这不正确，你能帮助我吗？

Answer 1

您可以使用纯CSS3执行此操作，但支持is not complete.

使用:first-child选择器，选择您想要的内容。 :first-child also works in jQuery所以你可以在那里使用它。

ul li:first-child会选择：

<ul>
  <li>             //this
    <li>
      <div></div>
    </li>
  </li>
  <li>             
    <li>
      <div></div>
    </li>
  </li>
</ul>

>选择所有直接后代，而不仅仅是第一个孩子。 e.g：

ul > li会选择：

<ul>
  <li>             //this
    <li>
      <div></div>
    </li>
  </li>
  <li>             // this
    <li>
      <div></div>
    </li>
  </li>
</ul>

Answer 2

您是否尝试过此CSS选择器：

.main_menu ul li:first-child {
   // some style
}

应该不需要jQuery那样！

，正如评论中所指出的，您的标记是错误的。每个嵌套的<li>都需要包装在另一个<ul>，IE：

中

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>

Answer 3

您可以使用:first-child选择器，该选择器选择作为其父级的第一个子元素的所有元素。

$('.main_menu ul li:first-child')

文档

Answer 4

尝试

$('.main_menu ul li').first().addClass('fancyClassOnFirstChild');

或$('.main_menu ul li:first-child').addClass('fancyClassOnFirstChild');

Answer 5

尝试

$('.main_menu ul').first('li').css('border','1px solid red');

Answer 6

名为:first-child的伪选择器可以选择元素的第一个子元素。这是一个CSS选择器，jQuery也支持它。所以你可以通过CSS或jQuery使用它。

ul li:first-child {
   /* Your style */
}

或jQuery

$("ul li:first-child").css('style-name', 'property value');

Answer 7

它正在运作......

$('.main_menu ul li:first')

Answer 8

尝试：

.main_menu ul li:first-child {
   // some style
}

Answer 9

试试，

$('.main_menu li:first').css('color','red');

Answer 10

试试这个：fiddle

$('ul').children('li').first().addClass('active');

Answer 11

使用eq(0)。您可以这样做。试试这段代码：

$('.main_menu > ul').find('li:eq(0)').addClass('classname');

如何为每个第一个列表元素添加样式，第一个使用jQuery的子元素

11 个答案: