使用jQuery隐藏动态元素的正确方法

Question

我有一个div元素，我的代码将填充动态数量的链接。使用jquery，我想隐藏除第一个之外的所有链接。这就是我提出的并且它有效，我只是想知道这是否是最好的方法：

$("#panelContainer").each(function(n) {
  $(this).children().hide();
  $("#panelContainer a:first").show();
});

Answer 1

你可以使用:gt() (greater than) selector缩短和加速它，如下所示：

$("#panelContainer :gt(0)").hide();

这假设孩子都是锚点，似乎就是你问题的情况，如果你需要它只影响链接而使用a:gt(0)，还有其他元素。

它更短，因为......嗯，它更短。它更快，因为您选择父级一次，子级一次并过滤，而不是父级，子级，父级再次过滤和过滤后代。此外，与原始版本一样，所有链接都会在javascript被禁用的情况下显示。

Answer 2

$("#panelContainer a:not(:first-child)").hide();

由于a元素是动态添加的，因此将它们添加为隐藏元素可能是有益的，然后显示第一个（如果它与您的应用程序的意图一起工作）。

以下假设隐藏了初始状态。

$("#panelContainer a:first-child").show();  // Instead of hiding many, 
                                            //    you could show one.

Answer 3

examples here只有几个CSS替代品。阅读有关quirksmode选择器兼容性的信息。可以在jQuery中用作选择器以及hide()函数。

从n + 2或第二个孩子开始

#panelContainer :nth-child(n+2) {
    display: none;
}

第一个子锚之后的所有锚点

#panelContainer > a + a {
    display:none;
}​

@patrick，除第一个之外的所有子节点

#panelContainer > :not(:first-child) {
    display: none;
}
​

再次感谢@patrick推荐这种超级跨浏览器的方法。首先隐藏所有链接，然后显示第一个

#panelContainer > a {
    display: none;
}

#panelContainer > a:first-child {
    display: inline;
}