Método para recorrer los descendientes y hermanos de un elemento con jQuery

1.recorrer descendientes

children()

El método children() devuelve todos los elementos hijos directos del elemento seleccionado.

!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 sin título</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(){
			$("#div1children().each(function(i, e) {
    $("#info").html($("#info").html())+"el"+i+"un descendiente directo es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método find() devuelve los elementos descendientes del elemento seleccionado, hasta el último descendiente.

El método find() debe incluir un selector. Si no se incluye, no se mostrará.

Por lo tanto, debe agregarse un selector dentro, por ejemplo, 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 sin título</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())+"el"+i+"un descendiente es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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.recorrer hermanos

siblings()

El método siblings() devuelve todos los hermanos gemelos del elemento seleccionado.

!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 sin título</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())+"el"+i+"un hermano es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método next() devuelve el siguiente hermano gemelo del elemento seleccionado

!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 sin título</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())+"el"+i+"un hermano es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método nextAll() devuelve todos los hermanos gemelos que siguen al elemento seleccionado.

!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 sin título</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())+"el"+i+"un hermano es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método nextUntil() devuelve todos los hermanos gemelos que siguen entre dos parámetros dados.

!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 sin título</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())+"el"+i+"un hermano es,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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=anterior

Por lo tanto, se recorren los hermanos gemelos anteriores al elemento especificado, este efecto es similar a next(), por lo que no se mostrarán ejemplos.

3.filtrar

first()

El método first() devuelve el primer elemento seleccionado.

!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 sin título</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="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método last() devuelve el último elemento seleccionado.

!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 sin título</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="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método eq() devuelve el elemento seleccionado que tiene el índice especificado.

!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 sin título</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="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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()

El método filter() le permite especificar un estándar. Los elementos que no coinciden con este estándar se eliminarán del conjunto y los elementos coincidentes se devolverán.

<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()

El método not() devuelve todos los elementos que no coinciden con el estándar.

El método not() es contrario a 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 sin título</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="Hacer clic" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
 <div id="div3">
  <div id="div4">
 		</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 implementación de este método de recorrido de elementos descendientes y hermanos de JQuery que he compartido con ustedes es todo lo que tengo. Espero que les sea útil como referencia y que apoyen activamente el tutorial de gritos.

Tutoriales básicos

Te gustará