問題:すでにレンダリングされている要素に作品を適用$(".price").hide();しますが、JavaScriptを介して新しいテンプレートをロードすると、価格クラスが表示されます。
質問: DOMに挿入するときに、クラスの将来のすべてのインスタンスにスタイルを適用する方法はありますか?
例:
$(".price").hide();
$('body').append('<div class="price">19.00</div>'); // this should be hidden.
問題:すでにレンダリングされている要素に作品を適用$(".price").hide();しますが、JavaScriptを介して新しいテンプレートをロードすると、価格クラスが表示されます。
質問: DOMに挿入するときに、クラスの将来のすべてのインスタンスにスタイルを適用する方法はありますか?
例:
$(".price").hide();
$('body').append('<div class="price">19.00</div>'); // this should be hidden.
これはlivequeryで実行できるはずです。
$('.price').livequery(function() {
$(this).hide();
});
利点は、これがDOMに追加する既存の要素と新しい要素をカバーすることです。
編集:他の人が指摘しているように、livequeryはjQuery1.3-1.4用に書かれています。ですから、それがあなたのケースにどれほど当てはまるかはわかりません。1.7.2に相当するものがあるかどうか見てみましょう。jQuery 1.7以降でlivequeryの機能を模倣する方法の詳細については、この回答をご覧ください。
最善の解決策は、ヘルパークラスを使用することだと思います。
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
このようにする代わりに、トグルスイッチでコンテナ要素を変更してクラスを追加または削除します。
次に、次のようなCSSルールを作成します。
.hidePrice .price{
display:none;
}
ボタンを切り替えるときは、コンテナ要素のhidePriceクラスを切り替えるだけです。
参照: http: //jsfiddle.net/bXChZ/
これは私のために働いた:
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);
<body>タグにクラスを追加してから、CSSで.price要素を非表示にすることができます。例えば
jQuery:
$('body').addClass('hide-price');
CSS:
.price {display: block}
.hide-price .price {display: none}