Rumah > Artikel > hujung hadapan web > Bagaimana untuk menanyakan elemen anak dengan jquery

Bagaimana untuk menanyakan elemen anak dengan jquery

青灯夜游asal: 2022-03-18 14:52:227179semak imbas

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.

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>

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>

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!

jquery 递归选择器

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：Bolehkah berbilang elemen dalam jquery terikat pada acara?Artikel seterusnya：Bolehkah berbilang elemen dalam jquery terikat pada acara?

Artikel berkaitan

Lihat lagi