jquery prev 函数实例-js教程-PHP中文网

jquery prev 函数实例

巴扎黑

发布： 2017-06-30 14:05:20

原创

1837 人浏览过

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>

登录后复制

效果：