Comment déterminer si un élément enfant spécifié existe dans jquery-js tutoriel-php.cn

Comment déterminer si un élément enfant spécifié existe dans jquery

青灯夜游

Libérer： 2022-03-03 15:57:09

original

2680 Les gens l'ont consulté

Méthode de jugement : 1. Utilisez l'instruction "$("parent element").has("child element").length". Si la valeur de retour est 1, l'élément enfant spécifié existe ; Élément parent ").children("child element").length", si la valeur de retour est supérieure ou égale à 1, l'élément enfant spécifié existe.

Comment déterminer si un élément enfant spécifié existe dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

jquery détermine si l'élément enfant spécifié existe

Méthode 1 : utilisez la méthode has()

has() pour réduire l'ensemble des éléments correspondants à un sous-ensemble dont les descendants correspondent au sélecteur spécifié ou un élément DOM.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					if ($("div").has("span").length) {
						console.log("指定子元素存在")
					} else {
						console.log("指定子元素不存在")
					}
				});
			});
		</script>
	</head>

	<body>
		<div style="border: 1px solid red;">
			<p>子元素1</p>
			<span>子元素2</span>
		</div><br>
		<button>指定子元素span是否存在</button>
	</body>
</html>

Copier après la connexion

Comment déterminer si un élément enfant spécifié existe dans jquery

Méthode 2 : utilisez la méthode children()

children() pour renvoyer tous les éléments enfants directs de l'élément sélectionné.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					if ($("div").children("p").length) {
						console.log("指定子元素存在");
						console.log($("div").children("p").length);
					} else {
						console.log("指定子元素不存在");
						console.log($("div").children("p").length);
					}
				});
			});
		</script>
	</head>

	<body>
		<div style="border: 1px solid red;">
			<p>子元素1</p>
			<span>子元素2</span>
			<span>子元素2</span>
			<p>子元素3</p>
			<p>子元素4</p>
		</div><br>
		<button>指定子元素是否存在</button>
	</body>
</html>

Copier après la connexion

Comment déterminer si un élément enfant spécifié existe dans jquery