Question

当点击一组<div>中的第n个孩子时，如何在一组<li>中选择第n个孩子？

HTML下面

<ul>
 <li><a href="#">link</a></li>
 <li><a href="#">link</a></li>
 ......
 <li><a href="#">link</a></li>
</ul>

<div class="info">
...
</div>
<div class="info">
...
</div>
......
<div class="info">
...
</div>

例如，当点击第二个<a>中的<li>时，应该选择第二个<div class="info">。

感谢

Answer 1

这有效：

$("li a").click(function(){ 
    $(".info").eq($("li a").index(this)).hide();
});

（样本http://jsfiddle.net/KGQDz/11/）

Answer 2

解决方案很简单，使用您的代码进行测试。将隐藏点击的元素。这里有一个包含更多元素http://jsfiddle.net/v2vqm/

的工作示例

$("ul li a").each(function(index){
   $(this).click(function(){
     $('.info').eq(index).hide();
   });
});

说明，您正在迭代加载脚本时可用的所有现有li a元素。通过该迭代，您可以传递相应的index，我们稍后会通过.info方法选择正确的eq(index)元素。

请注意，hide()仅用于演示。

相关文档：

http://api.jquery.com/each/

http://api.jquery.com/eq/

Answer 3

这应该给你一个粗略的想法（未经测试）

$('ul li').click(function() {
  var i = $(this).index();
  $('.info:eq('+i+')').addClass('selected');
  return false;
});

我已经创建了一个快速演示来展示这项工作：http://jsfiddle.net/Jbgkm/

jQuery - 当单击另一个父节点的第n个子节点时，选择父节点的第n个子节点

3 个答案: