Can someone please help me with the jquery's clone()
function?
Is there a way to duplicate a list (but only top level li
s) 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.
My solution (instead of trying to select top level LI's, I make <span>
necessary for effect).
<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>
$('ul>li').each(function(i, e){
var cloned = $(e).find('span').clone();
$(e).append( cloned.addClass('li-shadow') );
});
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; }