javascript - 複数のdivの色を数秒間変更したいが、最近ロードされたものだけ

Question

私は ajax の助けを借りて要求に応じて動的に div をロードしていますが、今私が望むのはそれらを数秒間強調表示することですが、$('div.eachrow').effect("highlight",{color:'#FCE8E8'},3000)このコードではクラスeachrowですべての div を強調表示するので、最近ロードされた div のみを強調表示する方法はありますか??

success: function(html) {
        if (html) {
            ++itr;
            $('#quepanel').append(html);
            $('div.eachrow').effect("highlight",{color:'#FCE8E8'},3000);
            $('div#loadMore').hide();
        }

Answer 1

jQuery オブジェクトを作成して強調表示できます。

success: function(html) {
        if (html) {
            ++itr;
            var $html = $(html);
            $html.appendTo('#quepanel');
            $html.effect("highlight",{color:'#FCE8E8'},3000);
            $('div#loadMore').hide();
        }

Answer 2

ミューテーション イベントを使用して、挿入された要素を特定できます。コンソールを開いてログを確認します。"test" div に何かが挿入されると、イベントが発生します。

HTML:

<div id="test"></div>
<input type="button" id="btn" value="add" onclick="$('<div>dyn</div>').appendTo('#test')" />​

JS:

document.getElementById('test').addEventListener("DOMNodeInserted", function (ev) {
  // ...
    console.log(ev.target);
}, false);​

jsFiddle: http://jsfiddle.net/LA3LZ/

Answer 3

成功ハンドラーで、最初に HTML を jQuery でラップします。これにより、DOM 要素がすぐに作成されます。

その後、Ajax で読み込まれた要素のみを操作できます。

success: function(html) {
    if (html) {
        ++itr;
        html = $(html); // Do this.

        $('$quepanel').append(html);

        html.effect('hightlight', { color: '#FCE8E8' }, 3000);

        $('div#loadMore').hide();
    }
}