Question

I run this jQuery (1.8.3) code and always get the “in” alerted even when the length is greater than 1.

What I’m doing is dynamically adding elements to a menu and the if is to make sure this element doesn’t exist yet.

I tried also == 0 and === 0 but the result is the same…

Here is a JS fiddle: http://jsfiddle.net/mHhwq/4/

$(".sidebarit a.olink").click(function(event){
   iframe_url = $(this).attr("href");
   sidebar_id = '#' + iframe_url.replace(/[/.]/g, '');
   alert('sidebar_id: ' + sidebar_id);

   // create the sidebar if it doesn't exist
   if ($(sidebar_id).length < 1) {
      alert("in");
      $("#sidebar_nav ul").append('<li></li>');
      $("#sidebar_content").append('<div id="' + sidebar_id + '" style="display:none;"></div></div>');
   } else { alert("out"); }

   // don't follow the link
   event.preventDefault();
});

In FireBug I see the length equals 1 but still enters the block.

What am I doing wrong?

Update:

My mistake was that I added the # at the wrong place…

Answer 1

Try to put alert inside if stmt as alert($(sidebar_id).length).

And you are making a mistake in appending the div to$("#sidebar_content").

Where sidebar_id is something like #test from sidebar_id = '#' + iframe_url.replace(/[/.]/g, ''); and you are appending like <div id= "#test" there, where it should be <div id= "test"(No # symbol is requird for id).

Your code will results like

$("#sidebar_content").append('<div id="#test" style="display:none;"></div></div>');

Change to

$("#sidebar_content").append('<div id="test" style="display:none;"></div></div>');

Then try again.