Javascript putting a if statement inside append(' ')?
<p>Alrighty so below I have this script doing exactly what I want;
I'm using it to add background fadeIn/fadeOut using jquery for my navigation bar.</p>

<p>With my design I have a separator image at the end of each li in a ul for my nav bar; to add that in I'm putting the span in with class "sep" which contains my css to add the separator image as a background in the proper location.</p>

<p>Now my problem is that I have the separator being a background image aligned right so it occurs at the right of each nav item (see below for a text-based example of its structure) and I wish the final item of the navigation to not have the separator.</p>

<p>Current Example Structure:
( Item 1 | Item 2 | Item 3 | )  </p>

<p>What I want it to be:
( Item 1 | Item 2 | Item 3 )</p>

<p>Now to do this inside the javascript I would somehow need to eliminate the entire <code>"&lt;span class="sep"&gt;&lt;/span&gt;"</code> or just the <code>"class="sep""</code> ONLY on my last li nav item (its ID is #n7)</p>

<p>So I'm assuming a general way to do it would be to add a if statement that if the current li ID is NOT #n7 (my li ID's go from #n1 to #n7, #n7 being the final) then it puts in <code>"&lt;span class="sep"&gt;&lt;/span&gt;"</code> so if it was #n7 it would not include it </p>

<p>Any help would be great, thanks.</p>

<p>Javascript Code:</p>

<pre><code>$(document).ready(function () {

 //Append a div with hover class to all the LI
 $('#nav li').append('&lt;div class="hover"&gt;&lt;span class="sep"&gt;&lt;/span&gt;&lt;/div&gt;');



 $('#nav li').hover(

  //Mouseover, fadeIn the hidden hover class 
  function() {

   $(this).children('div').fadeIn('1000'); 

  }, 

  //Mouseout, fadeOut the hover class
  function() {

   $(this).children('div').fadeOut('1000'); 

 }).click (function () {

  //Add selected class if user clicked on it
  $(this).addClass('selected');

 });

});
</code></pre>
