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

【问题标题】：Jquery Selectors on HTML. First and SiblingsHTML 上的 Jquery 选择器。第一和兄弟姐妹
【发布时间】：2014-09-02 23:11:58
【问题描述】：

我的任务是为一段 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，我什至不知道如何开始。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：

您提供的第一个答案似乎只正确选择了第一个链接，而不是第 5 个。这对我有用，虽然建立在你的建议之上，但这似乎有效> li:first a, li ul li a:first
我刚刚添加了一个jsfiddle来演示。我在 Firefox 和 Chrome 中进行了测试。不过不用担心。

【解决方案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;}

【讨论】：