HTML上的Jquery选择器。 第一和兄弟姐妹

Question

我的任务是为一个HTML编写10个不同的选择器。 看来我被困在最后两个。 我不知道如何正确显示要突出的内容。 任何帮助将不胜感激。 这是执行查询的代码。

 <ul id="links">
     <li><a href="link1">1</a></li>
     <li><a href="link2">2</a></li>
     <li><a href="link3">3</a></li>
     <li><a href="link4">4</a></li>
     <li>
         <p>Some other links</p>
         <ul>
             <li><a href="link5">5</a></li>
             <li><a href="link6">6</a></li>
         </ul>
     </li> 
 </ul>

我正在尝试编写两个jquery选择器，它们执行以下两件事：

1. 每个无序列表中的第一个链接。 （将选择链接1和链接4）
2. 链接2之后的所有同级链接

任何帮助将不胜感激。 我知道我将:first关键字用于1 ...但是我似乎无法让它选择所需的两个。 对于2，我什至不知道如何开始。

Answer 1

我认为您想选择列表中的第一个li，如果我正确阅读了您的帖子，则选择所有其他li。 尝试这个：

$(document).ready(function() {
   $('li').css('background-color','transparent');    
   $('li:first-child').css('background-color','yellow');
});

Answer 2

第一个很简单：

firstLi = $( "li:first a", "ul" ); // - selects 1 and 5, first element of each list

对于第二项，您是指链接的所有兄弟姐妹吗？ 由于每个链接都包含在自己的li中，因此这些链接本身都没有同级。 您可以对其进行测试：

$( "a" ).siblings(); // empty array - no matches, because the links have no direct siblings

如果您正在寻找li元素的兄弟姐妹，请使用.siblings（）选择器。 在上一个示例的基础上，选择前两个lis的所有同级，然后将其加粗：

$( "li:first", "ul" ).siblings().css("font-weight","bold");

jsfiddle： http : //jsfiddle.net/mqzjehrd/

Answer 3

您可以使用纯CSS做到这一点。

在CSS :first-child一个孩子很容易。 第二个列表项之后的所有兄弟姐妹都比较难，但是可以做到。 使用通用的同级选择器~ 。

实际观看： http : //jsfiddle.net/w4xg3r9c/

ul > li:first-child {color: red;}

li:nth-child(2) ~ li {color: green;}

您可以排除通过添加一个类来HTML的项目有子菜单项，然后排除该项目从选择的CSS，像这样 。

li:nth-child(2) ~ li:not(.has-submenu) {color: green;}