Trouble with jquery's append and prepend

I use the following code to check whether or not a certain div exists. And if it doesn't it adds it to the dom in the proper place.

if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

My problem is that when this if statement checks again for a div that had already once been appended/prepended, it doesn't see the div that I added. So it will continue to add the div that was already prepended/appended.

Is there any way this issue can be fixed?

more code:

//fillin added column
function fillElement(colnum)
{
    var URL = 'schedule.php';
    $("#col"+colnum).text("Loading...").show();
    $.post(URL,{fecolnum: colnum}, 
    function (data)
    {
        $("#col"+colnum).html(data).show();
    });
}
//...irrelevant code...

    // Create event listeners for .arrows clicks
      $('.arrows')
        .bind('click', function(){
            numberOfSlides++;
            // Determine new position
            if ($(this).attr('id开发者_StackOverflow')=='arrow_right')
            {
                lastSlide++;
                currentPosition++;
                if (!($("#col"+lastSlide).length))
                {
                    $('#schDisplay').append('<div id="col' + lastSlide + '" class="schColumn" style="float: left; width: ' +slideWidth+ 'px"></div>');
                    fillElement(lastSlide);
                }
            }
            else
            {
                lastSlide--;
                currentPosition--;
                if (!($("#col"+lastSlide-2).length))
                {
                    $('#schDisplay').prepend('<div id="col' + (lastSlide-2) + '" class="schColumn" style="float: left; width: ' +slideWidth+ 'px"></div>');
                    fillElement(lastSlide-2);
                }
            }

---

I don't have much context to go off of, but checkout this jsfiddle I made from what you gave me.

Notice the line where I've made a comment that you can comment out the increment statement. Basically, this is how you can test what happens when "lastSlide" is the same value. (versus if "lastSlide" is indeed a different value).

You might just try debugging your actual code and make sure that lastSlide has the value you actually expect.

---

If I understand your question correctly, you're saying that it keeps adding the div if you do the same thing again. However, I can't reproduce this. The following code shows one div. According to you, it would show two divs.

lastSlide = 1;
if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}
if (!($("#col"+lastSlide).length))
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

If I didn't miss something, your problem must lie elsewhere.

---

This will work:

if (!($("#col"+lastSlide).length)) {
  var newdiv = $('<div id="col'+lastSlide+'"/>');
  $('#schDisplay').prepend(newdiv);
}

---

It keeps adding because your if condition is always true.

I haven't tested this though...

Can you try something like this to see if it helps?

var len = 0;
len = $("#col"+lastSlide).length;
if (len < 1)
{
    $('#schDisplay').prepend('<div id="col' + (lastSlide) + '"></div>');
}

---

You can use jQuery filters to remove the selected div if it has already been prepended to. This should work for your particular scenario:

$('#schDisplay').filter(':not(:has(div[id^=col]))')

This says "select the div with id 'schDisplay' and then remove it from the selection if it has any descendent divs with ids start with 'col'".

In your example, you would chain on your prepend statement to this code like so (no need for an if statement):

$('#schDisplay').filter(':not(:has(div[id^=col]))').prepend('<div id="col' + (lastSlide) + '"></div>');

A special note: I believe that the :has selector is a jQuery content filter selector, meaning that it will not work without jQuery. You are clearly using jQuery, but readers with different implementations should keep this in mind.