jQuery的next()方法可以幫助我們在DOM結構中找到當前元素下一個符合選擇器條件的兄弟元素。下面是一個使用next()方法的例子:
<div> <h3>標題1</h3> <p>第一段內容</p> <p>第二段內容</p> </div> <div> <h3>標題2</h3> <p>第一段內容</p> <p class="target">第二段內容</p> <p>第三段內容</p> </div>
在以上代碼中,我們希望找到第二個div中class為“target”的p元素。可以使用以下代碼:
$(document).ready(function(){ $("div:nth-child(2) p").next(".target").css("color", "red"); });
這樣,第二個div中class為“target”的p元素就會變成紅色。
需要注意的是,如果沒有找到下一個符合條件的元素,next()方法會返回一個空jQuery對象。可以使用length屬性來檢查是否找到了元素。
除了next()方法,還有nextAll()和nextUntil()等方法,可以用于找到當前元素后面所有符合條件的兄弟元素或是不符合一定條件之前的所有兄弟元素。
$(document).ready(function(){ $("div:nth-child(2) p").nextAll().css("font-weight", "bold"); $("div:nth-child(2) p").nextUntil(".target").css("color", "green"); });
以上代碼將第二個div中class為“target”之前的所有元素的字體顏色變成了綠色,而第二個div中class為“target”之后的所有元素的字體加粗。
上一篇淘寶怎么獲得css權限