Heim > Artikel > Web-Frontend > Beispiel für eine jquery prev-Funktion

Beispiel für eine jquery prev-Funktion

巴扎黑Original: 2017-06-30 14:05:201838Durchsuche

prev() Die Funktion wird verwendet, um das vorherige Geschwisterelement des Elementsatzes abzugleichen. Nur das vorherige Geschwisterelement wird ausgewählt und seine untergeordneten Elemente werden ignoriert.

Die Funktion prev() ermöglicht das Filtern nach Selektoren. Beispielsweise wird prev(‘p’) verwendet, um p Elemente auszuwählen, deren vorheriges Element ein Geschwisterelement des passenden Elements ist.

Spezifischer Beispielcode:

<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>

Effekt:

Das obige ist der detaillierte Inhalt vonBeispiel für eine jquery prev-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für die Verwendung der prev()-Methode in jQueryNächster Artikel：Beispiel für die Verwendung der prev()-Methode in jQuery

In Verbindung stehende Artikel

Mehr sehen