下一個（）不選擇一個元素

Question

我有這樣的HTML代碼：

<div> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li class="third-item">list item 3</li> 
    <li>list item 4</li> 
    <li class="fifth-item">list item 5</li> 
    <li>list item 5</li> 
    </div> 

這jQuery代碼：

$("li.third-item").next(".fifth-item").css("background-color", "red"); 

這是爲了這個<li>項目漆爲紅色：

<li class="fifth-item">list item 5</li> 

我試過各種各樣的東西，但無法弄清楚發生了什麼。

Answer 1

next()元素後立即選擇的兄弟姐妹，你的情況.fifth-item不是之後。所以，你需要使用nextAll()和first()

1. nextAll() - 讓所有的兄弟姐妹元素
2. first()旁邊 - 從集合獲得的第一個元素

$("li.third-item").nextAll(".fifth-item").first().css("background-color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>list item 1</li> 
 
    <li>list item 2</li> 
 
    <li class="third-item">list item 3</li> 
 
    <li>list item 4</li> 
 
    <li class="fifth-item">list item 5</li> 
 
    <li>list item 5</li> 
 
</ul>