Question

我是javascript初学者。我有这个清单：

<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>

我需要在单击一个子项时显示匹配的div，并隐藏其他div，匹配的项目在此html结构中：

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

我如何做到这一点，我在stackoverflow中看到类似的帖子，但它没有类似的结构。

Answer 1

好吧，你可以用这个：

$(".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();获取当前.list个孩子。

然后将var find = $(this).parent().get(0); find设置为此a的li。

现在nth设置为当前li中此.list的索引。（因为CSS具有基于1的索引而添加1）

最后一件事：隐藏nth

中的.list-services链接以外的任何内容

Answer 2

这也可以使用普通的javascript来完成，这里是jQuery解决方案：

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

$(this).closest('li').prevAll('li').length位通过查找直接li父项并计算父li标记内的先前ul标记的数量来提供所点击子项的索引。然后，我们只使用.clearfix和eq

显示包含该索引的show项

DEMO

点击项目时显示li

2 个答案: