jQuery：隐藏类，以便隐藏该类的随后创建的元素答案

【问题标题】：jQuery: hide class such that subsequently created elements of that class are hiddenjQuery：隐藏类，以便隐藏该类的随后创建的元素
【发布时间】：2012-08-05 01:31:01
【问题描述】：

我一直在使用标准方法来隐藏/显示一个类，即：

$('.myClass').show();  // or .hide() or .toggle()

但是，如果myClass 被隐藏并创建了类的新元素，则它是可见的，因为.hide() 不影响它。为了解决这个问题，如果类在创建时隐藏，我将隐藏新创建的元素。

但是，有没有办法让我可以隐藏该类，使其自动应用于随后创建的元素？

我正在考虑这种模式：$('#container').on('click', '.myClass', function () {...，它将处理程序附加到稍后创建的元素。本质上，我想用 display 属性来模拟它。

【问题讨论】：

我认为没有？我能想到的最接近的是将某些东西绑定到 DOMNodeInserted！
你可以有一个.hidden 类，而不是使用show()/hide()，并且每当你创建一个新元素时，你首先给它那个类。顺便说一句，如果您是创建和初始化这些元素的人，您可以轻松地在初始化过程中隐藏它们。
@ŠimeVidas 是的，我已经在其他地方使用了 .hidden 类，尽管在这里使用它并没有太大的价值，因为我仍然需要检查 myClass 元素当前是否具有该类hidden 然后将第二个类 (hidden) 添加到新创建的元素中。

标签： javascript jquery class hide

【解决方案1】：

我认为您最好的选择可能是向#container 添加一个类，如下所示：

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


$( '#container' ).on( 'click', '.myClass', function () {

  $( "#container" ).toggleClass( "with-whatevers" );

} );

我不确定您切换 .myClass 元素可见性的确切机制 - 显然，如果它们被隐藏，您无法单击其中一个来切换它们的可见性。

我正在考虑这种模式： $('#container').on('click', '.myClass', function () {... 将处理程序附加到稍后创建的元素。

这实际上并没有将处理程序附加到稍后创建的元素上。它将它附加到#container。然后其后代上的任何点击事件都会冒泡，如果目标元素与传递给 on() 的选择器匹配，则将运行处理程序。

【讨论】：

好的，我会用 CSS 来做，然后在 #container 上添加/删除/切换该类。
我想我已经在这个小提琴中创建了一个解决方案：jsfiddle.net/8HHvS 通过单击另一个元素（即等效按钮）来实现切换，顺便说一句:)
我不明白——这应该显示什么？您只需在 3 秒后添加 2 个可见的 .myClass 元素。
是的，正如@adeneo 所指出的那样，我的小提琴工作不正常:(然而，你的解决方案是一个非常好的解决方案。我会接受它！！:)
我刚刚在实际代码中实现了这个解决方案，这是一个很棒的解决方案。为此干杯 - 很抱歉我花了这么长时间才了解你的方法:)

【解决方案2】：

实际上，这是一个绑定到DOMNodeInserted 事件的示例，只要在大多数较新的浏览器中将元素插入到 DOM 中就会触发该事件：

$(document).on('DOMNodeInserted', function(e) {//whenever an element is inserted
    if ($(e.target).is('.myClass')) {          //check if it has the right class
        $(e.target).hide();                    //and hide it if it does
    }
});

IE 不支持，不支持，我记得好像看过一些变通方法，所以应该可以跨浏览器吧。

这是一个快速的DEMONSTRATION

【讨论】：

是的，这更像是我要找的。不过，我创建了大量元素，所以我想知道效率成本是多少。 if 还必须检查 myClass 是否已经隐藏。
这是相当新的东西，我对效率的了解不多，所以我认为你必须在 jsperf 中运行它或在本地测试它以自己查看。添加一个检查以查看它隐藏的元素是没有问题的。这不是我真正会在生产站点中的重要内容上使用的东西，但玩起来很有趣！

【解决方案3】：

.myClass 应该在您的 CSS 中包含 display:none。然后，在需要时拨打.show()。

示例：http://jsfiddle.net/imsky/5J5Tt/

【讨论】：

嗯...有时myClass 是隐藏的，有时则不是。关键是在创建新元素时是否隐藏。
@Nick 当像 imsky 建议的那样定义时 - 任何具有该类的元素都将在创建时隐藏。调用 show 或 hide 会影响元素的 style 属性，而不是其类。
如果 .myClass{display:none;} 在您的 CSS 中，则浏览器无法将其绘制到 DOM 中。除非您在 HTML 中传递内联 CSS 规则。
@Caio Bianchi 嗯？绘制到 DOM 中？
如果.myClass 在您添加另一个元素时任意可见，请检查它是否在$(".myClass:visible").length 中可见，如果是，请在插入元素后调用.show()。

【解决方案4】：

在添加点击事件之前隐藏

$('.myClass').hide();

然后使用 jQuery 的 .on() 或 .delegate() 方法

$('#container').on('click', '.myClass', function(){
  $(this).toggle();
}

【讨论】：

我认为这里有一些误解。不涉及点击。我只是用点击处理程序作为一个类似的例子:)
那你为什么不直接通过 CSS 隐藏它们呢？