Question

<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");

这更符合我的用法。很干燥。

Answer 1

使用jQuery（'。my_class'）。live（'hide'）;

更新：您是否可以使用CSS代码设置display：none;对于所有my_class元素？

Answer 2

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

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

Answer 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。

jQuery隐藏未来的匹配元素

3 个答案: