Mostrar li al hacer clic en el elemento

Soy principiante en javascript. tengo esta lista:

<p class="lead">parent item1</p>
<ul class="list bot-2">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>
<p class="lead">parent item2</p>
<ul class="list bot-2">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>
<p class="lead">parent item3</p>
<ul class="list">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>

Necesito mostrar el div coincidente cuando se hace clic en un elemento secundario y ocultar otros divs, los elementos coincidentes están en esta estructura html:

<ul class="list-services">
    <li class="clearfix"></li>
    <li class="clearfix"></li>
    <li class="clearfix"></li>
</ul>

Cómo puedo hacer esto, veo publicaciones similares en stackoverflow, pero no tenía la estructura similar.

preguntado el 08 de febrero de 14 a las 12:02

¿Cómo se define "div coincidente"? -

el primer enlace coincide con el primer .clearfix -

su html no contiene ningún elemento "div" -

lo siento, quiero decir li, actualizaré el título del encabezado:

¿Algo en contra de jQuery? Lo haría de alguna manera más fácil. -

2 Respuestas

Bueno, podrías usar esto:

$(".list a").click(function(){
   var x = $(this).parents(".list").children().get();
   var find = $(this).parent().get(0);
   var nth = x.indexOf(find) + 1;
   $(".list-services .clearfix:not(:nth-child(" + nth + "))").hide();
});

http://jsfiddle.net/wumm/v7Ks7/1/

var x = $(this).parents(".list").children().get(); obtiene la corriente .list niños.

Entonces var find = $(this).parent().get(0); encontrar se establece en el lien que estuvo este.

Y ahora nth se establece en el índice de este li en la corriente .list. (Se agrega 1 porque CSS tiene un índice basado en 1)

Lo último: ocultar cualquier otra cosa, entonces el nth enlace en .list-services

Respondido 08 Feb 14, 13:02

¿Cómo podría entender lo que pide el OP? 'Necesito mostrar el div correspondiente'-no div esta en el OP. - istiaque ahmed

Esto también se puede hacer con javascript simple, aquí está la solución jQuery:

$('a').on('click', function (event) {
    $('.clearfix').hide();
    $('.clearfix').eq($(this).closest('li').prevAll('li').length).show();
});

El $(this).closest('li').prevAll('li').length bit proporciona el índice del elemento secundario en el que se hizo clic al encontrar el elemento inmediato li padre y contando el número de anteriores li etiquetas dentro del padre ul etiqueta. Entonces solo mostramos el .clearfix artículo con ese índice usando eq y show

DEMO

Respondido 08 Feb 14, 13:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.