javascript - 想要更改多个 div 的颜色几秒钟，但只更改最近加载的

Question

我在 ajax 的帮助下根据请求动态加载 div，现在我想要突出显示它们几秒钟，但是使用$('div.eachrow').effect("highlight",{color:'#FCE8E8'},3000)这段代码，它会突出显示类中的所有 div eachrow，所以有什么办法只突出显示最近加载的 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

在成功处理程序中，首先使用 jQuery 包装 HTML。这将立即创建 DOM 元素。

然后，您可以只处理 Ajax 加载的元素。

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

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

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

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

Answer 3

您可以使用突变事件来识别插入了哪些元素：打开控制台并查看日志。在“测试” 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/