Método de iteração de elementos filhos e irmãos do JQuery

1.percorrer descendentes

children()

O método children() retorna todos os elementos filhos diretamente selecionados.

<!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 sem 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())+"o"+i+"um descendente direto é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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()

O método find() retorna os elementos descendentes do elemento selecionado, até o último descendente.

No método find(), é necessário adicionar um seletor. Se não for adicionado, não será exibido.

Portanto, é necessário adicionar um seletor dentro, por exemplo, 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 sem 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())+"o"+i+"um descendente é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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.percorrer irmãos

siblings()

O método siblings() retorna todos os irmãos do elemento selecionado.

<!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 sem 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())+"o"+i+"um irmão é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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()

O método next() retorna o próximo irmão do elemento selecionado

<!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 sem 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())+"o"+i+"um irmão é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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()

O método nextAll() retorna todos os irmãos seguintes do elemento selecionado.

<!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 sem 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())+"o"+i+"um irmão é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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()

O método nextUntil() retorna todos os irmãos seguintes entre dois 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 sem 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())+"o"+i+"um irmão é,("+$(this).attr("id")+");
   });
 });
});
</script>
</head>
<body>
<input type="button" value="Clique" 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

Portanto, a iteração é feita sobre o irmão anterior do elemento especificado, efeito semelhante ao next(), então não vou exemplificar.

3.filtrar

first()

O método first() retorna o primeiro elemento selecionado.

<!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 sem 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="Clique" 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()

O método last() retorna o último elemento selecionado.

<!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 sem 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="Clique" 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()

O método eq() retorna o elemento selecionado com o í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 sem 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="Clique" 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()

O método filter() permite que você defina um padrão. Os elementos que não correspondem a esse padrão serão removidos do conjunto e os elementos correspondentes serão retornados.

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

O método not() retorna todos os elementos que não correspondem ao padrão.

O método not() é o oposto do método 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 sem 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="Clique" 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>

Aqui está o conteúdo completo do método de iteração de elementos descendentes e irmãos do jQuery que o editor compartilha com você, esperando fornecer uma referência e esperando que todos apoiem o tutorial gritar.

Tutorial básico