1

私のスクリプトでは、ページのセクションにスタイルシートを動的に作成する必要があります (後でメディア クエリでこれらのスタイルをオーバーライドする必要があるため、各要素にインライン スタイルを配置するのではなく)。

コード

for (var i=0; i<theElements.length; i++){

    $(theElements[i]).not('.responsive-wrap').each(function(i, elem){
        var theWidth = $(this).width();
        var parentWidth = $(this).parent().width();

        $(this).addClass('element' + [i]);

        $("#dynamicStylesheet").text('.element' + [i] + ' {max-width: ' + theWidth + 'px;}');
    });
}

主な質問は次のとおりです。

#dynamicStylesheetこれにより、ループの実行ごとにテキストが完全に上書きされます（したがって、ページをロードすると、 のルールは 1 つだけになります.element22）。上書きせずにテキストを追加するにはどうすればよいですか?

ボーナスポイントのサブ質問:

  • これはほとんどの場合機能し[i]ますが、角括弧で囲まれている場合のみです。どうしてこれなの？

    for loopここが必要ですか、それとも.each(function(){})本質的にfor loopとにかく作成していますか? eachこの関数の下for loopには、簡潔にするために投稿していない別の関数があります。

4

3 に答える 3

2

各反復中にテキストを追加しません。代わりに、文字列を作成してから要素に追加します。これにより、パフォーマンスも向上します。

forループは必要ありません。

var cssString = '';
$(theElements).not('.responsive-wrap').each(function(i, elem){
    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();

    $(this).addClass('element' + [i]);

    cssString += '.element' + [i] + ' {max-width: ' + theWidth + 'px;}';
});

$("#dynamicStylesheet").text(cssString);
于 2013-01-27T23:25:38.833 に答える
1

さて、いくつかのこと。theElementsが HTML 要素の配列であると仮定すると、eachは不要です。しかし、あなたが言っているので、そうではないようです( HTML要素の配列である場合element22、書かれたコードはelement0何度も何度も作成されるだけです)。theElements明らかtheElementsに、配列の配列、または jQuery オブジェクトの配列です。その名前を考えると奇妙ですが、力を入れましょう.

他の人が述べたように、繰り返しごとにテキストを上書きしていますが、これは悪いことです。文字列を作成する方がわずかに優れていますが、まだ文字列の連結を繰り返しているため、処理が遅くなります。これを行う必要がある場合は、配列に追加してから最後に結合する必要があります (文字列に追加すると、毎回ゼロから文字列全体が作成されるため、より高速です)。

var css = [];
for (var i = 0; i < theElements.length; i++) {
    $(theElements[i]).not('.responsive-wrap').each(function(i) {
        var theWidth = $(this).width();
        $(this).addClass('element' + i);
        css.push('.element' + i + ' {max-width: ' + theWidth + 'px;}');
    });
}
$("#dynamicStylesheet").text(css.join('\n'));

今、それは機能し、あなたが望むことをします。しかし、これは、あなたがやろうとしていることを行うための正しい方法ではないことはほぼ間違いありません. CSS エディターのようなものを作成している場合を除き、クライアント上で CSS を動的に構築することは適切ではありません。この道をたどった問題が何であれ、それを解決するためのはるかに簡単な方法があります。

クライアント側のスタイルシートを作成することが絶対に重要である場合、これを行うためのより良い方法もあります。要素のすべての要素に適用される単一の CSS ルールを作成しますtheElements(うわー、その文を見てください)。それらがランダムに選択された場合、それは不可能ですが、何らかの論理クエリを通じてそれらにたどり着いた場合は、CSS で同じものを使用できます。

事が進む限り、[i]私はあなたに何を言うべきかわかりません。JavaScript が配列を文字列化する奇妙な方法により、それらは同等であり、iうまくいかない場合は、何か非常に問題があります。i.toString()私があなたなら使用しますが、正常にi動作するはずです。

編集

がタグ名の配列である場合theElements、これは次のように簡略化できます。

var tagNames = theElements; // clear variable names are important!
var css = [];
$(tagNames.join(',')).not('.responsive-wrap').each(function(i) {
    var $this = $(this);
    $this.addClass('element' + i.toString());
    css.push('.element' + i.toString() + '{ max-width: ' + $this.width() + 'px; }');
});
$("#dynamicStylesheet").text(css.join('\n'));
于 2013-01-27T23:38:51.287 に答える
1

これは、毎回上書きするのではなく、テキストを追加する簡単な方法です。

$("#dynamicStylesheet").text(
             $("#dynamicStylesheet").text()
             + '.element' + [i] + ' {max-width: ' + theWidth + 'px;}');

for ループに関しては、each必要なのはこれだけです。数が必要な場合は、カウント変数を追加してください。また、ループの外側で変数を設定$("#dynamicStylesheet")するので、jQuery は毎回要素を探す必要がありません。これは、パフォーマンスを向上させるためです。

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$(theElements).not('.responsive-wrap').each(function(){
    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
});

編集

がタグ名の配列である場合theElements、このようなものは私のオリジナルよりもうまく機能します。

var i = 0,
    stylesheet = $("#dynamicStylesheet");

$.each(theElements, function(){
  if( !$(this).hasClass('responsive-wrap') ){

    var theWidth = $(this).width();
    var parentWidth = $(this).parent().width();
    var elemName = "element" + i;

    $(this).addClass(elemName);

    stylesheet.text(
             stylesheet.text()
             + '.' + elemName + ' {max-width: ' + theWidth + 'px;}');
 }
});

テストされていませんが、動作するはずです..

于 2013-01-27T23:20:06.877 に答える