1. 程式人生 > >Jquery中next()方法與prev()方法的使有和詳解

Jquery中next()方法與prev()方法的使有和詳解

在jQuery中,我們可以選擇某個DOM元素進行獲取和操作,但是有時候我們在操作某個元素的時候,也要對它相鄰的的元素進行獲取或是操作,那我們該如何去做呢,今天記錄一個獲取某個元素的相鄰的上一個元素或相鄰的下一個元素。

jQuery中的next()方法
next()方法,獲取指定元素同輩的下一個元素

語法

$().next()

jQuery中的prev()方法
prev方法:獲取指定元素同輩的上一個元素

語法

$().prev();

例子:
獲取指定li標籤的上一個元素並使字型為綠字,獲取它的下一個元素使其字型為紅色

JQ獲取上一個元素,jQ獲取下一個元素

HTML程式碼

<ul>
    <li>我是第一個li標籤</li>
    <li>我是綠色的字型</li>
    <li class="element">我是第三個li標籤</li>
    <li>我是紅色的字型</li>
    <li>我是第五個li標籤</li>
</ul>

jQuery程式碼

$(".element").next().css("color","red");
$(".element").prev().css("color","green"
);

結果如下圖
這裡寫圖片描述