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

Question

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

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

Answer 1

您可以使用:gt()(大于)选择器缩短并加速它,如下所示:

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

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

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

`$('#panelContainer a').slice(1).hide()`最快,fwiw.任何时候你都可以使用一种方法而不是依靠嘶嘶声来获得速度提升. (2认同)

Answer 2

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

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

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

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