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

Question

I have been tasked with writing 10 different selectors for a piece of HTML. It seems I am stuck on the last two. I have no idea how to get the correct things to be highlighted. Any help would be greatly appreciated. Here is the code that the query is executing on.

 <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>

I am trying to write two jquery selectors that do the following two things:

1. The first link in each Unordered List. (would select link 1 and link 4)
2. All sibling links after link 2

Any help would be greatly appreciated. I know I am to use the :first keyword for 1...but I cant seem to get it to select both that are needed. For 2, I have no idea how to even begin.

Answer 1

I think you want to select the first li in your lists, and then all other li's if I read your post correctly. Try this:

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

Answer 2

First one is easy:

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

For the second item, do you mean all siblings of the links? Since each link is contained in its own li, none of the links have siblings per se. You can test it:

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

If you are looking for siblings of li elements, use the .siblings() selector. Building on the previous example, select all the siblings of the first two lis, then bold them:

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

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

Answer 3

You can do this with pure CSS.

First child is easy in CSS: :first-child . all siblings after the second list item is a bit harder, but can be done. Use the general sibling selector ~ .

See it in action: http://jsfiddle.net/w4xg3r9c/

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

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

You can exclude the item that has a sub menu by adding a class to those items in HTML and then exclude that item from the selection in CSS, like so .

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