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和链接4）
链接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中的选择中排除该项目，例如so。

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

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

3 个答案: