Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Seleccionar parrafo en un div con texto especifico

Estas en el tema de Seleccionar parrafo en un div con texto especifico en el foro de Frameworks JS en Foros del Web. Amigos, necesito de su ayuda, tengo el siguiente codigo html: Código: <nav id="d_mis-libros"> <ul id="d_menu-mis-libros"> <li id="d_boton-menu-mis-libros"> <p id="d_texto-boton-mis-libros">Mis Libros</p> <ul id="d_lista-mis-libros"> <div class="d_caja-lista-mis-libros"> <div ...
  #1 (permalink)  
Antiguo 15/08/2012, 07:51
Avatar de crea3d  
Fecha de Ingreso: septiembre-2010
Ubicación: Lima, Perú
Mensajes: 43
Antigüedad: 7 años, 10 meses
Puntos: 1
Seleccionar parrafo en un div con texto especifico

Amigos, necesito de su ayuda, tengo el siguiente codigo html:

Código:
<nav id="d_mis-libros">
	<ul id="d_menu-mis-libros">
		<li id="d_boton-menu-mis-libros">
			<p id="d_texto-boton-mis-libros">Mis Libros</p>
			<ul id="d_lista-mis-libros">
				<div class="d_caja-lista-mis-libros">
					<div class="d_corrector-caja-mis-libros">
						<li class="d_los-libros">
							<p>opcion 1</p>
                                                        <p>opcion 2</p>
                                                        <p>opcion 3</p>
						</li>
					</div>
				</div>
			</ul>
		</li>
	</ul>
</nav>

<section class="d_contenido-libro">
	<p class="d_nombre-libro">opcion 1</p>
	<div class="d_caja-contenido-libro">
		<ul id="d_contenido-capitulos-libro">
			<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
		</ul>
	</div>
</section>
<section class="d_contenido-libro">
	<p class="d_nombre-libro">opcion 2</p>
	<div class="d_caja-contenido-libro">
		<ul id="d_contenido-capitulos-libro">
			<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
		</ul>
	</div>
</section>
<section class="d_contenido-libro">
	<p class="d_nombre-libro">opcion 3</p>
	<div class="d_caja-contenido-libro">
		<ul id="d_contenido-capitulos-libro">
			<li><a href="#"><p class="d_nombre-capitulo">intro</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 1</p></a></li>
			<li><a href="#"><p class="d_nombre-capitulo">Capitulo 2:</p></a></li>
		</ul>
	</div>
</section>

lo que deseo es lo siguiente:

1. Cuando den click en cualquiera de los parrafo con el texto "opcion 1", "opcion 2", etc (cada parrafo son las opciones de <li>) ubicado dentro de <li> con la clase "d_los-libros" que pertenece a la etiqueta <nav>, seleccione el <section> que contiene el parrafo con el mismo texto y le aplique el css "display: block".

Gracias por su valiosa ayuda.
  #2 (permalink)  
Antiguo 15/08/2012, 08:45
Avatar de crea3d  
Fecha de Ingreso: septiembre-2010
Ubicación: Lima, Perú
Mensajes: 43
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Seleccionar parrafo en un div con texto especifico

he probado este script, detecta el click en el parrafo dentro de <li>, pero el codigo siguiente no funciona:

Cita:
<script>
$(function(){
//detectar click en parrafo
$('.d_los-libros').click(function(){
//almacenar el texto del parrafo en una variable
var texto = $(this).text();
//abre una alerta ara mostrar que la variable contiene el texto del parrafo
alert(texto);
//Aqui no funciona bien, supuestamente selecciono el <section> por su clase .d_contenido-libro siempre y cuando contenga un parrafo con el mismo texto que el seleccionado anteriormente y le aplica el css, pero no funcionaaaaaaaaaaa
$("'.d_contenido-libro:contains('"+ texto +"'))'").css("display","block");
});
});
</script>
  #3 (permalink)  
Antiguo 15/08/2012, 09:56
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 396
Antigüedad: 11 años, 5 meses
Puntos: 47
Respuesta: Seleccionar parrafo en un div con texto especifico

Pone este codigo en el head:

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.         var p = $(".d_los-libros p");
  3.         var s = $(".d_contenido-libro");
  4.         $.each(p,function(i,v) {
  5.             $(p[i]).bind("click",function() {
  6.                 $(s[i]).slideToggle("slow");
  7.             })
  8.         })
  9.     })

Tene en cuenta que para que funcione los parrafos y los sections deben estar consecutivos como lo estan ahi parrafo1 = opcion1 , section1 = seccion1.

Saludos
  #4 (permalink)  
Antiguo 15/08/2012, 10:06
Avatar de crea3d  
Fecha de Ingreso: septiembre-2010
Ubicación: Lima, Perú
Mensajes: 43
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Seleccionar parrafo en un div con texto especifico

Amigo djaevi, muchas gracias por tu ayuda, podrias explicar un poco lo que hace este script?

Te explico lo que trato de lograr, que al seleccionar alguna de las tres opciones (pueden ser mas o menos opciones), haga que sea visible el section que contiene el parrafo con el mismo texto que el de la opcion seleccionada, es decir, si eligen la opcion 3 (<p>opcion 3</p>) se haga visible el section que contiene el parrafo con el texto Opcion 3 y asimismo con las otras opciones, ojala me haya explicado bien, cabe decir que cada section tiene aplicado en el css el display:none, el cual hay que cambiar a block para que sea visible.

Última edición por crea3d; 15/08/2012 a las 10:12
  #5 (permalink)  
Antiguo 15/08/2012, 10:46
Avatar de djaevi  
Fecha de Ingreso: marzo-2007
Ubicación: Moreno, Buenos Aires
Mensajes: 396
Antigüedad: 11 años, 5 meses
Puntos: 47
Respuesta: Seleccionar parrafo en un div con texto especifico

Hola crea3d con gusto mira te paso a explicar.

var p = $(".d_los-libros p");

Creo esta variable y le asigno todos los parrafos que esten contenidos dentro del li con la clase de los libros (existe 1 solo), entonces el array p seria algo asi:

p[0] = equivale al '<p>opcion 1</p>'" dentro de '<li class="de_los_libros">';
p[1] = equivale al '<p>opcion 2</p>'" dentro de '<li class="de_los_libros">';
p[2] = equivale al '<p>opcion 3</p>'" dentro de '<li class="de_los_libros">';

Luego hago lo mismo pero para seleccionar los sections del html:

var s = $(".d_contenido-libro");

s[0] = equivale al '<section class="d_contenido-libro">'
s[1] = equivale al '<section class="d_contenido-libro">'
s[2] = equivale al '<section class="d_contenido-libro">'

Luego lo que hago es un bucle jquery ($.each()); con el cual recorro el primer array el de los parrafos donde p es el array e i es el indice, entonces le asigno a cada elemento del array p una funcion al hacerle click, por lo cual cada parrafo ahora ya tiene una funcion asignada al hacerle click arriba. dicha funcion es : $(s[i]).slideToggle("slow");Como el array p y el array s deben tener el mismo tamaño
(parrafo1, parrafo2, parrafo3) y (seccion1, seccion2, seccion3) puedo usar el indice que uso para recorrer p para llamar un elemento del array s por eso te decia que era tan imporante mantener el orden al a hora de crear los parrafos y las secciones, entonces $(s[i]).slideToggle("slow"); significa que a esa seccion le haga el efecto slideToggle() que no es mas que un display:block o display:none segun el estado anterior pero animado (queda mejor :P) y por ultimo todo este codigo lo meto dentro del $(document).ready() de jquery asi al cargase el arbol dom ya define la funcion para todos los parrafos.

Espero me hayas entendido je si te quedan dudas avisame Saludos!
  #6 (permalink)  
Antiguo 15/08/2012, 11:23
Avatar de crea3d  
Fecha de Ingreso: septiembre-2010
Ubicación: Lima, Perú
Mensajes: 43
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Seleccionar parrafo en un div con texto especifico

muchas gracias amigo djaevi, si en algo puedo ayudarte, cuenta conmigo.
Tu correo hotmail esta activo?, te mando un email

Etiquetas: especifico, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:06.