.prev()
.prev( [ selector ] ) 返回: jQuery
描述: 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。選擇性篩選的選擇器。
-
version added: 1.0.prev( [ selector ] )
selector一個用于匹配元素的選擇器字符串。
如果提供的jQuery代表了一組DOM元素,.prev()方法通過這些元素組合傳遞到方法構(gòu)造一個新的jQuery對象。
該方法選擇性地接受同一類型選擇器表達式,我們可以傳遞給$()函數(shù)。如果選擇供應,將被過濾的元素通過測試它們是否匹配。
考慮一個頁上有一個簡單的列表:
<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>list item 5</li> </ul>
如果我們開始在第三個項目,我們可以找到元素的緊鄰的前一個同輩元素:
$('li.third-item').prev().css('background-color', 'red');
此調(diào)用的結(jié)果是項目2紅色背景。由于我們沒有提供一個選擇的表達,所有的兄弟姐妹都是對象的一部分。如果我們提供的一個,其中只有四個匹配的項目將包括在內(nèi)。
Examples:
Example: Find the very previous sibling of each div.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:40px; height:40px; margin:10px;
float:left; border:2px blue solid;
padding:2px; }
span { font-size:14px; }
p { clear:left; margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div></div>
<div></div>
<div><span>has child</span></div>
<div></div>
<div></div>
<div></div>
<div id="start"></div>
<div></div>
<p><button>Go to Prev</button></p>
<script>
var $curr = $("#start");
$curr.css("background", "#f99");
$("button").click(function () {
$curr = $curr.prev();
$("div").css("background", "");
$curr.css("background", "#f99");
});
</script>
</body>
</html>
Demo:
Example: For each paragraph, find the very previous sibling that has a class "selected".
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>$("p").prev(".selected").css("background", "yellow");</script>
</body>
</html>