3

これを達成するためのエレガントな方法があるかどうか知りたいです。

私の質問: 既に作成されているいくつかの div 要素のいくつかの CSS プロパティを変更し、それらの変更を同じクラスの新しく作成された要素にも適用する必要があります。

例えば：

CSS:

.myDiv{left:100px}

HTML:

<div id="decode_me">
    <div id="div1" class="myDiv">Drink</div>
    <div id="div2" class="myDiv">More</div>
</div>

JS:

$('.myDiv').css('left','50px');
$('#decode_me').append('<div id="div3" class="myDiv">Ovaltine</div>');

最初の 2 つの div は 50 に設定されたままですが、3 番目の div は CSS 固有の 100px にフォールバックします。いくつかのウィンドウのサイズ変更イベントに基づいて左と幅を設定しているため、左が50に設定されている別のクラスを作成しても、数値が変わるため機能しないようです。

私は .live と .on を調べましたが、それらをトリガーするには何らかのイベントが必要だと思います。新しい要素が追加されるたびにすべてのサイズを変更する関数を呼び出す以外に、これを行うためのきちんとした方法はありますか? 私の回避策は少し大ハンマーのようです。

実際の使用: jQuery 1.7.1 を使用して CMS のようなフレームワーク (phpFox) 内で作業して、基本的にテーブルとなるものを作成しました。新しい行が追加されるとスクロールする行の束です。各行には 7 つの「列」があり、そのうちの 2 つは常に 50px 幅です。「テーブル」はページをロードせずにフルスクリーンに設定できるため、残りのサイズを変更する必要があります。

別の解決策がある場合は、喜んで試してみたいと思います。私はテーブルを作成することから始めましたが、新しい行が追加されると上にスクロールすることに加えて、スタイリングの量が非常に苦痛になりました。相対的に配置された div を使用してみましたが、テキストがオーバーフローするという問題が発生しました。「行」を相対に設定し、すべての「列」の div を絶対に設定しましたが、ご覧のとおり、それには多くの問題が伴います。

私が思いついた各ソリューションは、ちょっとした混乱のようです。これを達成するための簡単な方法が必要だと思っています。貿易によるPHPの男。読んでくれてありがとう！

4

4 に答える 4

2

liveQuery を使用することをお勧めします: https://github.com/brandonaaron/livequery

$('div').livequery(function() { 
    $(this).css({left: 100px})
})
于 2012-07-13T04:08:27.353 に答える
0

上記のように、 livequery はオプションであるか、要素をロードするブロックに追加するだけです。

于 2013-01-14T19:29:58.683 に答える
0

私がすることは、CSS を追加する関数を定義し、すぐにその関数を呼び出し、追加の最後にその関数をトリガーすることです。ただし、ここで新しいクラスを追加すると、CSS をオンザフライで変更するよりもはるかにパフォーマンスが向上します。

var myfunction = function() {
    $('.myDiv').css('left','50px');
};

myfunction();

$('#decode_me')
  .append('<div id="div3" class="myDiv">Ovaltine</div>')
  .trigger(myfunction());
于 2013-01-14T19:24:24.597 に答える
0

毎回すべてのサイズを変更する必要はありません。jQuery セレクターをサイズ変更関数に渡すことができます。resize() を自分で呼び出す必要がありますが、それほど悪くはありません。

function resize($obj) {
    $obj.css('left','50px');
}

// What you had originally
resize($('.myDiv'));

// Create the new element, resize it individually
var $newElem = $('<div id="div3" class="myDiv">Ovaltine</div>');
$('#decode_me').append($newElem);
resize($newElem);
于 2012-07-13T04:13:18.877 に答える