CODEWITHSUNDEEP
jquery
Jesse
Jesse

Reputation: 239

jQuery clone li and its children

I'm trying to clone one li and its children and then append it to another div. My problem is I can only seem to get the anchor tags in the li tags and not the actual li structure. I'm using contains to find the correct li to clone. I know first is the wrong function to use but what I need to do is get the previous li and its children where currentCategory is found. I created JSfiddle to show it clearer http://jsfiddle.net/2EE2J/

$(document).ready(function () {
    var currentCategory = $(".Breadcrumb ul li:last").text();
    $(".SideCategoryListFlyout li a:contains('" + currentCategory + "')").first().clone().appendTo("#test");
});

I am getting this:

<a href="link">link</a>
<a href="link">link</a>
<a href="link">link</a>

I want this:

<ul>
    <li class=""><a class="sf-with-ul" href="">Belts<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;">
    <li><a href="">Casual Belts</a></li>
    <li><a href="">Jean Belts</a></li>
</ul>

Upvotes: 1

Views: 363

Answers (1)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

Ok, here we go (fork a Fiddle here: http://jsfiddle.net/mori57/QBmUZ/)

The main issue is that you're really selecting a tags that happen to be children of li's... so the selector is going to return an array of a tags, not their parent(s).

So, we need a selector of li tags... let's start there:

var arrLI = $(".SideCategoryListFlyout li");

We know that will get you an array of LI tags... but how can we filter it so that it only contains li's that have the a tags you want? Introducing the .has() method! (API docs here: http://api.jquery.com/has/)

var arrLI = $(".SideCategoryListFlyout li").has("a:contains('" + currentCategory + "')");

Here, we simply are taking your li array, and checking to see if they have your desired contents.

Just as an aside, I know people love chaining, cuz it's cool and neato and has that "wow gee whiz" factor to it. However, you have to remember that every time you throw a selector into a chain, it forces jQuery to have to reparse the DOM tree to look for the new selector. You're narrowing the field, but not by a lot, and forcing a lot of reparsing. Additionally, all that chaining makes debugging a real bear, and makes it harder to make sense of your code. Now, other smarter people than I can tell you what the performance differences are, but I'd sincerely suggest that you only chain where it is absolutely necessary, cache objects as often as possible, and break your code into easily readable and digestible chunks.

Upvotes: 1

Related Questions