Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

青灯夜游
Lepaskan: 2022-05-17 17:48:03
asal
2714 orang telah melayarinya

3 kaedah: 1. Gunakan prev() untuk mendapatkan elemen adik-beradik sebelumnya, sintaksnya ialah "element.prev()" 2. Gunakan prevAll() untuk mendapatkan semua elemen adik-beradik sebelumnya, sintaks "; Element.prevAll()"; 3. Gunakan prevUntil(), sintaksnya ialah "Element.prevUntil(stop)".

Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

3 cara untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

  • kaedah terdahulu(), terutamanya digunakan untuk mendapatkan elemen sebelumnya bagi sesuatu yang ditentukan elemen Tahap elemen adik beradik

  • kaedah prevAll(), terutamanya digunakan untuk mendapatkan semua elemen adik beradik pada tahap sebelumnya elemen yang ditentukan

  • prevUntil( ) Kaedah, terutamanya digunakan untuk mendapatkan elemen adik-beradik sebelumnya bagi unsur yang ditentukan ini unsur adik-beradik ini mestilah unsur antara unsur yang ditentukan dan unsur yang ditetapkan oleh kaedah prevUntil()

    Kaedah ini mengembalikan satu antara unsur tersebut. dua parameter yang diberikan. Semua elemen adik beradik sebelum setiap elemen antara

1 Gunakan kaedah prev()

prev(). untuk mengembalikan Elemen adik beradik sebelumnya bagi elemen yang dipilih.

Nota: Kaedah ini hanya mengembalikan satu elemen.

Sintaks:

$(selector).prev(filter)
Salin selepas log masuk
参数描述
filter可选。规定缩小搜索前一个同级元素范围的选择器表达式。

Contoh: Kembalikan elemen saudara sebelumnya bagi elemen

  • dengan nama kelas "mula"

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<style>
    		.siblings *{ 
    			display: block;
    			border: 2px solid lightgrey;
    			color: lightgrey;
    			padding: 5px;
    			margin: 15px;
    		}
    		</style>
    		<script>
    		$(document).ready(function(){
    			$("li.start").prev().css({"color":"red","border":"2px solid red"});
    		});
    		</script>
    		</head>
    		<body>
    		
    		<div style="width:500px;" class="siblings">
    			<ul>ul (父节点)  
    				<li>li (兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li class="start">li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>   
    		</div>
    		
    		</body>
    		</html>
    Salin selepas log masuk

    Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

    2 Gunakan kaedah prevAll()

    Kaedah prevAll() mengembalikan semua elemen adik-beradik sebelum elemen yang dipilih.

    Sintaks:

    $(selector).prevAll(filter)
    Salin selepas log masuk
    ParameterPenerangan
    penapis Pilihan. Menentukan ungkapan pemilih yang mengecilkan skop elemen kebersamaan elemen carian sebelumnya.
    参数描述
    filter可选。规定缩小搜索元素之前的同级元素范围的选择器表达式。

    注意:如需返回多个同级元素,请使用逗号分隔每个表达式。

    Nota:
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<style>
    			.siblings * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style>
    		<script>
    			$(document).ready(function() {
    				$("li.start").prevAll().css({
    					"color": "red",
    					"border": "2px solid red"
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<div style="width:500px;" class="siblings">
    			<ul>ul (parent)
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li的上一个兄弟节点)</li>
    				<li class="start">li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>
    		</div>
    
    	</body>
    </html>
    Salin selepas log masuk
    Untuk mengembalikan berbilang elemen adik beradik, gunakan koma untuk memisahkan setiap ungkapan.

    Contoh: Kembalikan semua elemen adik-beradik sebelum elemen

  • dengan nama kelas "mula": Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery

    3 Gunakan kaedah prevUntil()

    $(selector).prevUntil(stop,filter)
    Salin selepas log masuk
    参数描述
    stop可选。表示在哪里停止搜索元素之前匹配的同级元素的选择器表达式、元素、jQuery 对象。
    filter可选。规定缩小搜索介于 selectorstop 之间的同级元素范围的选择器表达式。

    注意:如需返回多个同级元素,请使用逗号分隔每个表达式。
    Kaedah prevUntil() mengembalikan semua elemen adik-beradik sebelum setiap elemen antara pemilih dan henti.

    ParameterPenerangan
    berhentiPilihan. Ungkapan pemilih, elemen, objek jQuery yang mewakili tempat untuk berhenti mencari elemen adik beradik yang sepadan sebelum elemen.
    penapisPilihan. Menentukan ungkapan pemilih yang mengecilkan carian untuk elemen adik beradik antara pemilih dan berhenti.
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<style>
    			.siblings * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style>
    		<script>
    			$(document).ready(function() {
    				$("li.start").prevUntil("li.stop").css({
    					"color": "red",
    					"border": "2px solid red"
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<div style="width:500px;" class="siblings">
    			<ul>ul (父节点)
    				<li class="stop">li (类名为"stop"的兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
    				<li class="start">li (类名为"start"的li节点)</li>
    				<li>li (兄弟节点)</li>
    				<li>li (兄弟节点)</li>
    			</ul>
    		</div>
    
    	</body>
    </html>
    Salin selepas log masuk

    Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jqueryNota:

    Untuk mengembalikan berbilang elemen adik-beradik, gunakan koma untuk memisahkan setiap ungkapan.

    Contoh: Kembalikan semua elemen adik beradik antara dua

  • dengan nama kelas "mula" dan "berhenti"[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]
  • Atas ialah kandungan terperinci Bagaimana untuk mendapatkan beberapa elemen adik beradik pertama dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    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
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan