html lists - jQuery extracting part of a ul tree -

can explain why i'm getting this. i'm trying replicate part of <ul> list tree <div> based on matching <a> link within <li>.

it kind of works, in locates correct part of <ul> tree. instead of replicating it, seems extract totally original tree.

this code, see working thing @ link below:

$(document).ready(function (e) {   var test = "/our-services/";   var subnav = $('#mainnav ul').find('a[href$="' + test + '"]').parent();   $('#thing').html(subnav).wrapinner('<ul/>'); }); 

jsfiddle

what gives?

you need use clone() method avoid moving originally-found node/elements:

$(document).ready(function (e) {     var test = "/our-services/"         subnav = $('#mainnav ul').find('a[href$="' + test + '"]').parent().clone(true);      $('#thing').html(subnav).wrapinner('<ul/>'); }); 

js fiddle demo.

or, re-written:

$(document).ready(function (e) {     var test = "/our-services/",         subnav = $('#mainnav ul').find('a[href$="' + test + '"]').parent().clone(true);      subnav.appendto('#thing').wrap('<ul />'); }); 

js fiddle demo.

references:

• appendto().
• clone().