Question

Can someone please help me with the jquery’s clone() function?

Is there a way to duplicate a list (but only top level lis) and append it to itself. I want to make it look a shadow of the actual list because IE7 doesn’t support shadows. I did try a few plug-ins but none worked perfectly, so I thought this might be a better way.

eg.
I want to generate a clone of the following but only top level

 <ul>
   <li>home</li>
   <li>about</li>
   <li>services
     <ul>
        <li>web</li>
        <li>grahpic</li>
     </ul>
   </li>
 <ul>

to generate another list without the sublevels.

 <ul>
   <li>home</li>
   <li>about</li>
   <li>services</li>
 <ul>

I tried

$('ul li').clone().appendTo('ul li');   

but it gives a huge copy.

Answer 1

http://jsfiddle.net/JUtkm/1/

My solution (instead of trying to select top level LI’s, I make <span> necessary for effect).

HTML

<ul class="top">
   <li><span>home</span></li>
    <li><span>about</span></li>
    <li><span>services</span>
     <ul>
         <li>web</li>
        <li>grahpic</li>
     </ul>
   </li>
 <ul>

jQuery

$('ul>li').each(function(i, e){
    var cloned = $(e).find('span').clone();
    $(e).append( cloned.addClass('li-shadow') );
});

CSS

ul.top {position: relative;}
li {position: relative;}
li span {position: relative; z-index: 10; display: block; }
.li-shadow { color: rgb(130,130,130); position: absolute; top: 1px; left: 1px; z-index: 5; }