-2

我有这个标记：

<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它的孩子。所以，我的问题是如何用 jQuery 设置它，当我尝试$('.main_menu ul > li');它不起作用时。我想我需要某种这样的写法：

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

但它不正确，你能帮帮我吗？

4

11 回答 11

1

你可以用纯 CSS3 做到这一点，虽然支持不完整。

使用:first-child选择器，这会选择你想要的。 :first-child 也适用于 jQuery，因此您可以在那里使用它。

ul li:first-child会选择：

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

>选择所有直系后代，而不仅仅是第一个孩子。例如：

ul > li会选择：

<ul>
  <li>             //this
    <li>
      <div></div>
    </li>
  </li>
  <li>             // this
    <li>
      <div></div>
    </li>
  </li>
</ul>
于 2013-02-27T10:06:12.557 回答
1

你试过这个 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>
于 2013-02-27T10:06:59.160 回答
0

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

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

或 jQuery

$("ul li:first-child").css('style-name', 'property value');
于 2013-02-27T10:08:27.563 回答
0

它正在工作...

$('.main_menu ul li:first')
于 2013-02-27T10:08:41.627 回答
0

尝试：

.main_menu ul li:first-child {
   // some style
}
于 2013-02-27T10:08:47.313 回答
0

试用，

$('.main_menu li:first').css('color','red');
于 2013-02-27T10:14:13.970 回答
0

试试这个：小提琴

$('ul').children('li').first().addClass('active');
于 2013-02-27T10:20:08.273 回答
0

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

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

文档

于 2013-02-27T10:06:25.697 回答
0

尝试

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

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

于 2013-02-27T10:06:47.100 回答
0

尝试

$('.main_menu ul').first('li').css('border','1px solid red');
于 2013-02-27T10:06:47.020 回答
-1

使用eq(0).You 可以做到这一点。试试这个代码：

$('.main_menu > ul').find('li:eq(0)').addClass('classname');
于 2013-02-27T10:11:06.630 回答