jQuery隐藏未来匹配的元素答案

【问题标题】：jQuery hide future matched elementjQuery隐藏未来匹配的元素
【发布时间】：2011-10-17 23:10:15
【问题描述】：

<div class='my_class'></div>
<div class='my_class'></div>
<div class='my_class'></div>
<div class='my_class'></div>

jQuery('.my_class').hide();
jQuery('.some_other_class').live('click', function(){
// some other stuff that puts in another div with class 'my_class'
});

使用此脚本，前 4 个 div 将在加载时隐藏。但是，当我单击任何内容时，新的 div 将不会出现。如何使所有与“my_class”匹配的未来元素也自动隐藏？

编辑

我找到了这个here：

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head"); $("<div/>").addClass("redbold").text("SOME NEWTEXT").appendTo("body");

这更符合我将使用的方式。烘干机很多。

【问题讨论】：

你有什么理由不使用 CSS display:none 那个类？

标签： jquery

【解决方案1】：

使用 jQuery('.my_class').live('hide');

更新：你能不能用 CSS 代码来设置 display: none;对于所有 my_class 元素？

【讨论】：

不，抱歉。我记得这应该可行，但显然不行。
这行不通。 .live() 绑定一个事件处理程序来处理未来元素上的事件。它不会对我们在此处所追求的未来元素执行效果。
我可以，我只是不想把 CSS 也混入其中。
显然，没有办法委托 hide，所以这以“dry”est 获胜。

【解决方案2】：

基本上，您需要确保在新元素呈现在您的页面上之前将其隐藏：

jQuery('.my_class').hide();
jQuery('.some_other_class').live('click', function(){
   var myDiv = $('<div />', { "class": "my_class" }).hide().insertAfter('div.my_class:last');
});

【讨论】：

我尽量保持干燥。我不想将该行放在也会影响此页面的其他 3 个脚本中。

【解决方案3】：

不确定您是否可以自动执行所需的操作，但您可以尝试以下操作：

jQuery('.some_other_class').live('click', function(){
    var myClassIsVisible = $(.my_class).is(':visible');
    var newDiv = // create new div with class 'my_class'
    newDiv.toggle(myClassIsVisible);
    // insert newDiv into the DOM
});

这将创建新的div，其状态与现有的相同。

【讨论】：