Bienvenid@s, hoy veremos el método find(), esta herramienta proporcionada por Jquery es útil para buscar elementos jerárquicamente a partir de un elemento padre, es decir, si quisieras encontrar todos los elementos span que se encuentran en el interior del elemento div y aplicarles un estilo, podrías hacer lo siguiente ...
$("div").find("span").css({fontSize: "20px"});
De esta forma estarías modificando los estilos de todos los elementos span que se encontrasen en el interior de un div, pero no a todos los span.
Para verlo más claro puedes copiar el siguiente ejemplo, en el cual hay dos elementos div con elementos span en su interior y un elemento span externo, es decir que no se encuentra en el interior de un div, al hacer click sobre el botón sólo se modificarán los estilos CSS de los span que pertenecer al elemento div.
Código de ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como buscar selectores jerárquicamente con el método find de Jquery</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#btn-buscar").bind("click", function(){
$("div").find("span").css({fontSize: "20px"});
});
});
</script>
</head>
<body>
<h1>By <a href="http://jquery-manual.blogspot.com" target="_blank">http://jquery-manual.blogspot.com</a></h1>
<p>El método find permite buscar a partir de un elemento padre otros selectores hijos de éste, es decir busca descendentemente a otros
elementos pertenecientes al elemento principal.</p>
<p>En el siguiente ejemplo buscaremos todos span que se encuentren en el interior del elemento div y le aplicaremos unos estilos CSS.</p>
<input type="button" id="btn-buscar" value="Aplicar estilos CSS a todos los hijos span del elemento div">
<div class="texto-1"><span>Soy un elemento span en el interior de un div</span></div>
<div class="texto-1"><span>Soy otro elemento span en el interior de un div</span></div>
<span>Soy un elemento span pero no me encuentro en el interior de un div</span>
</body>
</html>
1 comentario:
Hola! Tengo una consulta acerca de .find.. Soy un poco novato con jquery, y me gustaria saber como hago para separar dos .find que se encuentran seguidos uno del otro, ya que quiero que la misma acción se efectue en ambos. Copio el codigo, sólo me faltaria poder unirlos, y no sé que se usa:
bthumbs = bbxWrapper.find('div.bx-thumbs > div > a').hide(),
bthumbs = bbxWrapper.find('div.bx-titles > div.menu_titles > a').hide(),
Qué iria en el medio de los dos?
Muchas gracias.
Publicar un comentario