18 votos

Destino de primer nivel <li>s y no anidados <li>s

Tengo el siguiente código HTML:

<ul>
  <li>A
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>B
    <ul>
      <li>subsection</li>
    </ul>
  </li>
  <li>C
    <ul>
      <li>subsection</li>
    </ul>
  </li>
</ul>

Con jQuery, ¿cómo me meta en el PRIMER nivel de <li>s?

Por ejemplo, tengo que hacer el tipo de letra negrita en asome a la <li>s con las letras a, B y C, pero NO se tiene que el estilo de la fuente aplicada a la anidados <li>s (con el nombre subsecciones).

He aquí una primera jsfiddle DEMO si quieres usarlo.

Gracias.

EDITAR--

Solución:

SELECTORES de hijos, esa es la respuesta.

No hay necesidad de jQuery, esto se puede hacer mediante el uso de CSS.

Aquí está la actualización de la DEMO

EDITAR-- he Aquí una más clara demostración de

Gracias,

31voto

Spudley Puntos 85371

Tener un recipiente <div> con una clase, y el uso de la > selector. Digamos que su contenedor div con la clase "miclase":

.myclass ul li {
   ...this will affect both levels of li.
}

.myclass > ul > li {
   ...this will only affect the first level.
}

.myclass > ul > li > ul > li {
   ...this will only affect the second level.
}

Nota: el > selector no funciona en IE6 y a continuación cuando se utiliza como un selector CSS. No funciona en todos los navegadores, aunque, incluyendo IE7 y IE8, y cuando se utiliza en JQuery, funciona en todos los navegadores compatibles con jQuery, incluyendo IE6.

12voto

user113716 Puntos 143363

Usted podría hacer esto:

$('ul > li:not(:has(ul))');

Pero lo mejor sería darle a su nivel superior, <ul> un ID para poder utilizarlo con un selector CSS válido:

$('#topUL > li')

4voto

ricardozea Puntos 1738

SELECTORES de hijos, esa es la respuesta.

No hay necesidad de jQuery, esto se puede hacer mediante el uso de CSS.

Aquí está la actualización de la DEMO

Gracias,

1voto

Smirkin Gherkin Puntos 4098

Me gustaría establecer una regla para identificar todos los li elementos y, a continuación, otro para anular este que se dirige a anidada li elementos.

li{font-weight:bold;}
ul ul li{font-weight:normal;}

Anidado li elementos sería de peso normal y el nivel superior se negrita.

1voto

typeof Puntos 2001

No creo que su problema ha sido completamente dirigida (aunque ha habido algunos buenos intentos). Su problema de ejemplo se ocupa de aplicar un estilo a un padre y evitar que el niño hereda el estilo-que es un CSS problema.

Podría orientar a los elementos de la lista por conocer el elemento padre (como algunos han dicho). A continuación, agregue una clase en hover.

$('div > ul > li').hover(function(){
    $(this).addClass('myHover');
},
function(){
    $(this).removeClass('myHover');
});

Y tu CSS tendría la clase para los padres, y una negación de estilo para los niños:

.myHover { font-weight: bold; }
.myHover li { font-weight: normal; }

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: