Bagaimana untuk menanyakan elemen anak dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menanyakan elemen anak dengan jquery

青灯夜游

Lepaskan： 2022-03-18 14:52:22

asal

7230 orang telah melayarinya

Cara untuk menanyakan elemen anak dalam jquery: 1. Gunakan kaedah children() untuk mendapatkan elemen subset langsung di bawah elemen yang ditentukan 2. Gunakan kaedah find() untuk mendapatkan semua (termasuk kanak-kanak) di bawah elemen yang ditentukan. subset set) elemen subset.

Bagaimana untuk menanyakan elemen anak dengan jquery

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

pemilih elemen kanak-kanak jQuery find() dan kanak-kanak()

kaedah kanak-kanak(): dapatkan elemen elemen subset langsung di bawah
kaedah find(): Dapatkan semua (termasuk subset subset) elemen subset di bawah elemen

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</style>
</head>
<body>
    <div>
    	<span>11</span>
    	<span>
    		<ul>
    			<li class="no1">aaa</li>
    			<li>bbb</li>
    			<li>ccc</li>
    		</ul>
    	</span>
    	<span>222</span>
    	<ul>
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    	</ul>
    </div>
 
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	$("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
</script>
</html>

Salin selepas log masuk

Bagaimana untuk menanyakan elemen anak dengan jquery

Pada ketika ini kami membuka item cari dan mengulas

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</style>
</head>
<body>
    <div>
    	<span>11</span>
    	<span>
    		<ul>
    			<li class="no1">aaa</li>
    			<li>bbb</li>
    			<li>ccc</li>
    		</ul>
    	</span>
    	<span>222</span>
    	<ul>
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    	</ul>
    </div>
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	// $("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

Salin selepas log masuk

Tangkapan skrin yang sepadan:

Bagaimana untuk menanyakan elemen anak dengan jquery

Untuk meringkaskan perbezaan :

Kaedah children() mengembalikan semua elemen anak langsung bagi elemen yang dipilih (elemen anak langsung, hanya anak lelaki dan bukan cucu (: maksudnya, tiada traversal rekursif)

Kaedah find() memperoleh keturunan setiap elemen dalam set elemen semasa (perhatikan bahawa kaedah find() mesti melepasi parameter, jika tidak, ia akan menjadi tidak sah)

[Pembelajaran yang disyorkan: video jQuery tutorial 、bahagian hadapan web】

Atas ialah kandungan terperinci Bagaimana untuk menanyakan elemen anak dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!