Question

i have a few div’s like this:

test
test
test
test

i am adding a new div on the fly:

function ajax() { 
    $.ajax({  
        url: '/test/',
        type: 'GET',
        dataType: "json",
        processData: false,
        success: function(data) {   

            var firstDiv = $('.test').find("div:first");
            var lastId = firstDiv.attr("id");
            console.log(lastId); 

            var out = '';

            $(data).each(function(i) { 
                messageid = data[i].messageid;
                message = data[i].message;

                if (messageid != lastId){
                    if(null != message)
                    {
                        out += '<div id="'+ messageid +'"</div>';
                        $('.test').append(out);
                    }   
                }
            });
        }
    });
    window.setTimeout("ajax()",1000);
}

basically , if essageid != lastId and there is a message append a new div with a id to the main test div.

the firstDiv suppose to get the id value of the first div, and it does, but as soon as a new div comes in with a new mesage firstDiv doesnt update to the new id value but holds the old one.

any idea how to always get the last value of the last div id, even if the new div is added on the fly?. Im not sure how to use live() or delegate() here.

thanks

Answer 1

Check for the last div, instead of the first one.

var firstDiv = $('.test').find("div:last");

Your other option is to use prepend instead of append.