Aplicar clase solo al padre y no a todos los hijos

doylelives · #1 (**permalink**) 14/01/2010, 08:03

Dentro de un item de una lista(<li>) poseo un enlace y una lista(<ul>) con items, los cuales poseen enlaces.

Código PHP:

  <li>
  <span>
      <a href="#">Chapter A</a>
  </span>
  <ul>
       <li>
         <a href="#">1.1</a>
       </li>
       <li>
         <a href="#">1.2</a>
       </li>
       <li>
         <a href="#">1.3</a>
       </li>
  </ul>
</li>

Mi referencia (this) apunta siempre al enlace clickeado.
Tengo que aplicar un clase llamada .luz css, al enlace clickeado, pero si el enlace está dentro de otro ul (enlaces: 1.1, 1.2, 1.3), la clase se aplica al enlace clickeado y al enlace del li principal (enlace Chapter A).
La clase pone en negrita un texto, al aplicarselo al li principal pone tambien ese estilo a todos los texto de los enlaces de la sublista, incluso los que no clickee.
Como podría resolver eso??

Krato · #2 (**permalink**) 14/01/2010, 08:25

Creo que es esto lo que buscas no?:

Es con jQuery.

Añadir clase al objeto padre del link pulsado

Código Javascript:

Ver original$(this).parent().addClass("MiClase");

Quitar clase:

Código Javascript:

Ver original$(this).parent().removeClass("MiClase");

doylelives · #3 (**permalink**) 14/01/2010, 08:46

Si, es con jquery.
Eso puedo lograrlo, agregar la clase a this y al padre, pero cuando lo aplico al padre tambien se aplica a los hijos, solo se debe aplicar a this (el enlace clickeado) y al padre, pero no a los hijos que no fueron clickeados.
Se puede?

mayid · #4 (**permalink**) 14/01/2010, 08:54

Seguro que estas usando parent() y no parents()?

En todo caso podes poner un nombre de clase a los li secundarios, y usar ese nombre para filtrar la seleccion:

Cita:

$(this).parent(".secundario").addClass("MiClase");

doylelives · #5 (**permalink**) 14/01/2010, 08:59

Si , uso parent().
No puedo agregar mas clases, estoy adaptandome a un menu funcional.
Al aplicar la clase a "Chapter A", tambien pone en negrita a los hijos.
Ese es el problema...

Dany_s · #6 (**permalink**) 14/01/2010, 09:16

Código HTML:

<html>
    <head>
        <title>Ejemplo</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
$( function () {
    $('a').click( function (){
        $(this).parents('li').find('a:first').css('color', 'red');
    });
});
        </script>
    </head>
<body>
<ul>
  <li>
  <span>
      <a href="#">Chapter A</a>
  </span>
  <ul>
       <li>
         <a href="#">1.1</a>
       </li>
       <li>
         <a href="#">1.2</a>
       </li>
       <li>
         <a href="#">1.3</a>
       </li>
  </ul>
</li>
<li>
    <a href="#">Chapter B</a>
</li>
</ul>
</body>
</html>

SergeMedina · #7 (**permalink**) 14/01/2010, 09:42

doylelives tu problema no parece ser el javascript, creo que es mas bien un problema de css. Verifica tus reglas de estilo.

doylelives · #8 (**permalink**) 14/01/2010, 10:06

Anduvo con el code de Dany_s, solo se aplicó al :first, y en otra linea lo aplico a this (link clickeado). (el css no se puede modificar)
Anduvo en IE y FF mejor no lo tocó mas,
Gracias gente!!

Dany_s · #9 (**permalink**) 14/01/2010, 10:38

porque en agregas otra linea para this? eso aplica tambien al link que clickeaste

doylelives · #10 (**permalink**) 14/01/2010, 12:36

mmm ahora me entró la duda!! porque yo aparte aplicaba el estilo a this (el clickeado), quite esa linea y sigue andando??????
o sea se aplica el estilo solo al enlace principal y al clickeado, ¿y como sabe que se debe aplicar tambien a this?
Copio el codigo para que quede mas claro

Código PHP:

  cleanLinksAndPaint: function() { 
        $("#nav li a").removeClass("select"); 
//elemento contiene a this 
//        $(elemento).addClass("select"); 
//si es un enlace dentro de una sublista, estilizo el enlace principal 
//pero tambien se aplicó al enlace interno clickeado¿?¿?¿? 
        if ( CLEAN_LINKS.isInternalLinkList() ) { 
            $($(elemento).parents("li").find('a:first')).addClass("select"); 
        } 
    },

Código PHP:

  <li> 
  <span> 
      <a href="#">Chapter A</a> 
  </span> 
  <ul> 
       <li> 
         <a href="#">1.1</a> 
       </li> 
       <li> 
         <a href="#">1.2</a> 
       </li> 
       <li> 
         <a href="#">1.3</a> 
       </li> 
  </ul> 
</li>

mayid · #11 (**permalink**) 14/01/2010, 13:29

Estoy medio perdido, pero este selector me parece raro:

Cita:

$($(elemento).parents("li").find('a:first')).addCl ass("select");

Para que englobarlo en $()?

doylelives · #12 (**permalink**) 14/01/2010, 13:34

Fue la unica manera de usar el addClass sobre lo que le antecede... soy novato en esto
sino me decia "addclass is not a function"

Dany_s · #13 (**permalink**) 15/01/2010, 06:50

porque busca los li ateriores al link y despues el primer link

por ej: si clickeo a <a href="#">1.2</a> va a encontrar el li padre de ese link y el li principal que contiene a la sublista

<li>
<span>
<a href="#">Chapter A</a>
</span>

<li>
<a href="#">1.2</a>
</li>

</li>

ahora busca el primer link de cada li que es

<a href="#">Chapter A</a>

<a href="#">1.2</a>

doylelives · #14 (**permalink**) 15/01/2010, 07:06

Ahhhhhh, habia entendido mal el funcionamiento de parents("li"), gracias por la explicación.