Question

问题：将$(".price").hide();应用于已呈现的元素，但是，当我通过javascript加载新模板时，价格类将可见。

问题：有没有办法在插入DOM时将样式应用于所有未来的类实例。

示例：

$(".price").hide();
$('body').append('<div class="price">19.00</div>'); // this should be hidden.

Answer 1

您应该可以使用livequery执行此操作。

$('.price').livequery(function() {
    $(this).hide();
});

优点是，这将涵盖您添加到DOM的现有元素以及任何新元素。

编辑：正如其他人指出的那样，livequery是为jQuery 1.3-1.4编写的。所以我不确定它对你的情况有多适用。 ~~让我看看是否有相同的1.7.2。~~看一下this answer，了解有关在jQuery 1.7 +中模仿livequery功能的更多信息。

Answer 2

我认为最好的解决方案是使用辅助类：

CSS

.helper{
    display: none;
}

的jQuery

$(".price").addClass('helper'); //for dyanmic addition to certain classes
$('body').append('<div class="price helper">19.00</div>');  //for adding afterward

Answer 3

不要这样做，而是让切换开关修改容器元素以添加或删除类。

然后，有一个看起来像这样的CSS规则：

.hidePrice .price{
    display:none;
}

切换按钮时，只需在容器元素上切换hidePrice类。

请参阅： http://jsfiddle.net/bXChZ/

Answer 4

这对我有用：

使用jQuery：

$('<style id="priceVisibility">div.results .price {display: none; }</style>').appendTo('head');

没有jQuery：

// Appending style element to the head with a overriding style.
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'priceVisibility';
style.innerHTML = 'div.results .price {display: none; }';
document.getElementsByTagName('head')[0].appendChild(style);

Answer 5

你可以在＆lt; body＆gt;中添加一个类。标记，然后用CSS隐藏.price元素。 E.g。

jQuery的：

$('body').addClass('hide-price');

CSS：

.price {display: block}
.hide-price .price {display: none}

无论是否使用jQuery将元素添加到DOM，都应用样式

5 个答案: