English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina iniziale
  3. Note di esperienza
  4. Testo principale

Metodo di jQuery per esplorare i discendenti e i fratelli degli elementi

1. Eseguire il ciclo sui discendenti

children()

Il metodo children() restituisce tutti i figli diretti dell'elemento selezionato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#div1").children().each(function(i, e) {
    $("#info").html($("#info").html()+"il " + i + " figlio diretto è,(" + $(this).attr("id") + ")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

find()

Il metodo find() restituisce tutti i discendenti dell'elemento selezionato, fino all'ultimo discendente.

È necessario aggiungere un selettore nel find() se non lo si fa, non verrà visualizzato

Quindi è necessario aggiungere un selettore ad esempio find("*") find("span")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#div1").find("*").each(function(i, e) {
    $("#info").html($("#info").html()+"il " + i + " figlio discendente è,(" + $(this).attr("id") + ")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

2. Eseguire il ciclo sui fratelli

siblings()

Il metodo siblings() restituisce tutti i fratelli dell'elemento selezionato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#div2").siblings().each(function(i, e) {
    $("#info").html($("#info").html()+"il"+i+"gemello è,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

next()

l'elemento successivo dell'elemento selezionato

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#p2").next().each(function(i, e) {
    $("#info").html($("#info").html()+"il"+i+"gemello è,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

nextAll()

Il metodo nextAll() restituisce tutti gli elementi gemelli seguenti dell'elemento selezionato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#p2").nextAll().each(function(i, e) {
    $("#info").html($("#info").html()+"il"+i+"gemello è,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

nextUntil()

Il metodo nextUntil() restituisce tutti gli elementi gemelli seguenti tra due parametri specificati.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("#p2").nextUntil("#p3").each(function(i, e) {
    $("#info").html($("#info").html()+"il"+i+"gemello è,("+$(this).attr("id")+")");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

prev()

prev()
prevAll()
prevUntil()
prev=previous=precedente

Quindi, l'iterazione è sugli elementi gemelli precedenti dell'elemento specificato, l'effetto è simile a next(), non esprimerò esempi.

3. Filtraggio

first()

Il metodo first() restituisce il primo elemento selezionato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("div p").first().each(function(i, e) {
    $("#info").html($("#info").html()+("("+$(this).attr("id")+")"));
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

last()

Il metodo last() restituisce l'ultimo elemento selezionato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("div p").last().each(function(i, e) {
    $("#info").html($("#info").html()+("("+$(this).attr("id")+")"));
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

eq()

Il metodo eq() restituisce l'elemento selezionato con l'indice specificato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("div p").eq(1).each(function(i, e) {
    $("#info").html($("#info").html()+("("+$(this).attr("id")+")"));
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

filter()

Il metodo filter() ti permette di specificare un criterio. Gli elementi che non corrispondono a questo criterio vengono rimossi dalla集合a, e gli elementi che corrispondono vengono restituiti.

<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("div p").filter("#p2").each(function(i, e) {
    $("#info").html($("#info").html()+("("+$(this).attr("id")+")"));
   });
 });
});
</script>

not()

Il metodo not() restituisce tutti gli elementi che non corrispondono agli standard.

Il metodo not() è il contrario di filter().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function() {
	$("#btn").click(function(){
			$("div p").not("#p2").each(function(i, e) {
    $("#info").html($("#info").html()+("("+$(this).attr("id")+")"));
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clicca" id="btn"><div id="info"></div>
<div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
  <div id="div4"></div>
 		</div>
 </div>
 </div>
 <p id="p1"></p>
 <p id="p2"></p>
 <span id="span1"></span>
 <span id="span2"></span>
 <p id="p3"></p>
</div>
</body>
</html>

La seguente guida su come implementare la ricerca dei discendenti e dei cugini con jQuery è tutto ciò che ti offro, spero che ti sia utile come riferimento e ti auguro di continuare a supportare il tutorial urla.

Manuale di base
Ti potrebbe interessare