Question

我正在尝试的是这个;当点击组a中的一个DIV时，让B组中的等效组显示。我知道它可以单独完成，如我的emaple所示。因为DIV是动态生成的，并且编辑器有权向每个组添加数百个DIV，所以这是行不通的。请问这是什么最好的解决方案。

我的示例

  jQuery(document).ready(function(){
         $u=jQuery.noConflict();
           $u("grop a div:nth-of-type(1) ").click(function(){
          $u("group b div:nth-of-type(1) ").show();
        });
           });

DIV组A

    <div></div>
       <div></div>
       <div></div>
    <div></div>

DIV B组

    <div></div>
       <div></div>
       <div></div>
    <div></div>

Answer 1

像这样：

$('#groupA div').click(function () {
    $('#groupB div').eq($(this).index()).show()
})

<强> jsFiddle example

这使用jQuery的.index()函数来获取div的相对位置，索引，并通过.eq()将其应用于下一组。

Answer 2

首先，由于DIV是动态添加的，因此您必须使用on的事件委派。其次，你需要获得被点击元素在其组中的位置，这样你就可以在另一个组中显示相应的元素。

$u("#groupa").on("click", "> div", function() {
    $u("#groupb > div").eq($(this).index()).show());
});

我使用> div选择器来确保它只计算直接子节点，而不是DOM层次结构中的任何DIV。

从另一组元素中选择等效元素的等效元素

2 个答案: