關於HTML的Jquery選擇器。第一個和兄弟姐妹

我的任務是爲一段HTML編寫10個不同的選擇器。看起來我被困在最後兩個。我不知道如何得到正確的東西來突出顯示。任何幫助將不勝感激。這是查詢執行的代碼。關於HTML的Jquery選擇器。第一個和兄弟姐妹

<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選擇執行以下操作的兩件事情：

在每個項目列表的第一個環節。鏈路2

任何幫助，將不勝感激後

所有兄弟鏈接（將選擇鏈路1和鏈路4）。我知道我要使用:first關鍵字1 ...但我似乎無法得到它選擇所需的兩個。 2，我不知道如何開始。

來源

2014-09-02 Northpaw064

我想你想在你的列表中選擇第一個禮，然後將所有其他裏的，如果我正確地讀您的文章。試試這個：

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

來源

2014-09-02 23:25:51

第一個是簡單的：

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

如果你正在尋找鋰元素的兄弟姐妹，使用.siblings（）選擇器。在前面的例子爲基礎，選擇所有的兄弟姐妹的前兩個LIS的，那麼大膽他們：

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

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

來源

2014-09-02 23:31:43

您提供的第一個答案似乎只能正確選擇第一個鏈接而不是第五個鏈接。這對我來說雖然建立在你的建議上，但似乎可行 > li：首先，li li li a：第一個 – Northpaw064 2014-09-03 00:07:30

我剛加了個jsfiddle來演示。我在Firefox和Chrome中進行了測試。不過，不用擔心。 – 2014-09-03 18:12:31

你可以用純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;}

來源

2014-09-03 18:16:57

關於HTML的Jquery選擇器。第一個和兄弟姐妹

回答

相關問題