Rumah > Artikel > hujung hadapan web > jquery prev 函数实例

jquery prev 函数实例

巴扎黑asal: 2017-06-30 14:05:201841semak imbas

prev() 函数被用来匹配元素集的前一个兄弟元素，仅仅只有前一个兄弟元素被选择，其子元素将被忽略。

prev() 函数可以允许通过选择器来过滤，例如 prev(‘p’) 被用来选择匹配元素的前一个元素是兄弟元素的p元素。

具体实例代码：

<html>
	<head>
		<title>
			prev() example
		</title>
		<style type="text/css">
			p,p{
				width:110px;
				height:40px;
				margin:2px 8px 2px 8px;
				float : left;
				border:1px blue solid;
					
				}
			
			</style>
			<script type="text/javascript" src="../jquery-1.11.1.min.js">
				</script>
	</head>
	<body>
		<h1>jquery prev() example</h1>
		<p>
			  this is p 1
			  <p>p 1 child</p>
		</p>
		<p>this is paragraph 1</p>
    <p>
    	this is p 2
    	<p>p 2 child</p>
    	</p>
    	<p id="start"> this is p 3
<p>p 3 child</p>
    	</p>
<br/><br/><br/>
<br/><br/>
<button id="prevButton1">prev()</button>
<button id="prevButton2">prev("p")</button>
<button id="prevButton3">prev("p")</button>
<button id="reset">Reset</button>
<script type="text/javascript">
	var $currElement=$("#start");
	$currElement.css("background","red");
	$("#prevButton1").click(function(){
		if(!$currElement.prev().length){
			alert("no element found");
			return false;
			}
		$currElement=$currElement.prev();
		$("p,p").css("background","");
		$currElement.css("background","red");
		});
	
	$("#prevButton2").click(function(){
		if(!$currElement.prev("p").length){
			alert("no element found");
			return false;
			}
		$currElement=$currElement.prev("p")
		$("p,p").css("background","");
		$currElement.css("background","red")
		
		
		});
		$("#prevButton3").click(function(){
			if(!$currElement.prev(&#39;p&#39;).length){
				
				alert("no element found");
				return false;
				
				
				}
			
			$currElement=$currElement.prev(&#39;p&#39;);
			$("p,p").css("background","");
			$currElement.css("background","red");
			
			});
		  $("#reset").click(function () {
	  location.reload();
    });
	</script>
	</body>
</html>

效果：

Atas ialah kandungan terperinci jquery prev 函数实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery中prev()方法用法实例Artikel seterusnya：jQuery中find()方法用法实例

Artikel berkaitan

Lihat lagi