Develop Reference

add an active class to one of my elements and select only the relevant parent

In my menu I would like to add an active class to one of my elements: li.nav-item
and this only if the child item: ul.nav-collapse.li has the active class.
for this I made a script that works but it adds the active class to all elements: li.nav-intem
I would like it to select only the relevant parent: li.nav-item
which contains the active class ul.nav-collapse.li.active
JS
$('ul.nav-collapse li').each(function(){
if($(this).hasClass('active')) {
$(this).parent().parent().parent().parent().find('li.nav-item').addClass("active");
}
});
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I would like something like this
<ul>
<li class="nav-item active">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
any idea?

Check if current element has class "active"
Use closest to get parent element with specific class :
https://api.jquery.com/closest/
Then add class to the current element
$('ul.nav-collapse li').each(function() {
// if current item has class active
if ($(this).hasClass("active")) {
// add class to the current clicked element
$(this).closest('.nav-item').addClass("active");
}
});
.nav-item.active { border:1px solid red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Remove attribute of parent only?

I'm looking to remove the href attribute of the first link, at the moment it removes the attribute of ALL the links.
$("#menu-item-2003 a").removeAttr('href');
This is my html setup:
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

If you just want to remove the href of the first a, use direct descendent selector:
$("#menu-item-2003 > a").removeAttr('href');
The one which you use currently allows selection of the children at any level, which was causes the issue.
Working demo:
$("#menu-item-2003 > a").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Alternatively, if a is not a direct descendent, you can use the :first pseudo class to select the very first tag:
$("#menu-item-2003 a:first").removeAttr('href');

you can use first() in jquery
$("#menu-item-2003 a").first().removeAttr('href');

With First
Using .first() method
$("#menu-item-2003 a").removeAttr('href');
$("#menu-item-2003 a").first().removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :first Selector
$("#menu-item-2003 a:first").removeAttr('href');
$("#menu-item-2003 a:first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":first").removeAttr('href');
$("#menu-item-2003 a").filter(":first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
With eq
Using .eq() method
$("#menu-item-2003 a").eq(0).removeAttr('href');
$("#menu-item-2003 a").eq(0).removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :eq() Selector
$("#menu-item-2003 a:eq(0)").removeAttr('href');
$("#menu-item-2003 a:eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

Closest Image from li

I want to animate only the menu icons. If I remove the closest('img') it animates the whole li.
This doesn't work:
//animate menu icons
$('.nav-item').hover(function() {
console.log('entered');
$(this).find('img').toggleClass('animated swing');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="dashboard">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
<img src="../resources/img/icons/docker-icon.png" alt="">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="docker-status">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Status</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="container-creation">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Creation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-logs">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Logs</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-console">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Console</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-images">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-volumes">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Volumes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-info">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Information</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Your HTML is structured in such a way that you have .nav-item nested inside .nav-item. The <li> element is a block level element and in your dom hierarchy you have one large block level element (the third <li> from your example) on which you apply a hover. In this one block level element there are many images (which happen to be inside other .nav-item and perhaps this is confusing you). This large hover area created by the third <li> is causing all of the nested images to toggle.
To fix your specific example, you can isolate each hover action to the .nav-item a selector before doing the find operation to get specific child images for each anchor instead of each list item.
$('.nav-item a').hover(function() {
$(this).find('img').toggleClass('animated swing');
});

Try this code.
//animate menu icons
$('.nav-link').hover(function() {
console.log('entered');
$(this).find('.menu-image').toggleClass('animated swing');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="dashboard">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="general-setup" onclick="gitLabFetch()" id="createEnviromentTab">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Create Environment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-pages">
<img class="menu-image" src="../resources/img/icons/docker-icon.png" alt="">
<span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
</a>
<div class="collapse" id="docker-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link" href="docker-status">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Status</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="container-creation">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Creation</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-logs">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Logs</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-console">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Container Console</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-images">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-volumes">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Volumes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="docker-info">
<img class="menu-image" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png" alt="" class="menuIcon">
<span class="menu-title">Information</span>
</a>
</li>
</ul>
</div>
</li>
</ul>

Jump to list item from link

I have a UL in one div and an a-z list in another div. When I click a letter, d for example the list will jump to the first item starting with d.
I have it roughly working, but need some help to iron out the bugs. It doesn't always go to the item I'm looking for. If I click w for example it jumps to m and if I click w again it jumps to j. If I keep clicking w it will jump back and forth between m and j. It seems much worse as it gets toward the bottom of the list. I need to use className, not id as this is an auto generated list. Any help would be much appreciated. I'm very new to javascript and can't figure it out.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="file:///c:/media/jquery-3.1.1.min.js"></script>
<style>
#container {width: 100%;}
#leftbox {float: left; width: 30%;}
#rightbox {float: right; width: 60%; border: solid 1px #000000; height:
200px; overflow: scroll;}
</style>
</head>
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="a">A</a>
<a class="playalpha" href="b">B</a>
<a class="playalpha" href="c">C</a>
<a class="playalpha" href="d">D</a>
<a class="playalpha" href="e">E</a>
<a class="playalpha" href="f">F</a>
<a class="playalpha" href="g">G</a>
<a class="playalpha" href="h">H</a>
<a class="playalpha" href="i">I</a>
<a class="playalpha" href="j">J</a>
<a class="playalpha" href="k">K</a>
<a class="playalpha" href="l">L</a>
<a class="playalpha" href="m">M</a>
<a class="playalpha" href="n">N</a>
<a class="playalpha" href="o">O</a>
<a class="playalpha" href="p">P</a>
<a class="playalpha" href="q">Q</a>
<a class="playalpha" href="r">R</a>
<a class="playalpha" href="s">S</a>
<a class="playalpha" href="t">T</a>
<a class="playalpha" href="u">U</a>
<a class="playalpha" href="v">V</a>
<a class="playalpha" href="w">W</a>
<a class="playalpha" href="x">X</a>
<a class="playalpha" href="y">Y</a>
<a class="playalpha" href="z">Z</a>
<script type="text/javascript">
$('.playalpha').click(function (e) {
e.preventDefault();
var letter = $(this).attr('href');
//scroll to first h1.name element that begins with "letter"
var target = $('.play').filter(function () {
return $.trim($(this).text()).toLowerCase().indexOf(letter) == 0
});
$('html,body,div').animate({scrollTop: $(target).offset().top}, 400);
});
</script>
</div>
<div id="rightbox">
<ul>
<li class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>
</html>
JSfiddle example

Here is the solution.
Try href with '#id'
No need to use javascript/jQuery.
https://jsfiddle.net/mmghori/9y1saarc/
<body>
<div id="container">
<div id="leftbox">
<a class="playalpha" href="#a">A</a>
<a class="playalpha" href="#b">B</a>
<a class="playalpha" href="#c">C</a>
<a class="playalpha" href="#d">D</a>
<a class="playalpha" href="#e">E</a>
<a class="playalpha" href="#f">F</a>
<a class="playalpha" href="#g">G</a>
<a class="playalpha" href="#h">H</a>
<a class="playalpha" href="#i">I</a>
<a class="playalpha" href="#j">J</a>
<a class="playalpha" href="#k">K</a>
<a class="playalpha" href="#l">L</a>
<a class="playalpha" href="#m">M</a>
<a class="playalpha" href="#n">N</a>
<a class="playalpha" href="#o">O</a>
<a class="playalpha" href="#p">P</a>
<a class="playalpha" href="#q">Q</a>
<a class="playalpha" href="#r">R</a>
<a class="playalpha" href="#s">S</a>
<a class="playalpha" href="#t">T</a>
<a class="playalpha" href="#u">U</a>
<a class="playalpha" href="#v">V</a>
<a class="playalpha" href="#w">W</a>
<a class="playalpha" href="#x">X</a>
<a class="playalpha" href="#y">Y</a>
<a class="playalpha" href="#z">Z</a>
</div>
<div id="rightbox">
<ul>
<li id="a" class="play">a1</li>
<li class="play">a2</li>
<li class="play">a3</li>
<li id="b" class="play">b1</li>
<li class="play">b2</li>
<li class="play">b3</li>
<li id="c" class="play">c1</li>
<li class="play">c2</li>
<li class="play">c3</li>
<li id="d" class="play">d1</li>
<li class="play">d2</li>
<li class="play">d3</li>
<li id="e" class="play">e1</li>
<li class="play">e2</li>
<li class="play">e3</li>
<li id="f" class="play">f1</li>
<li class="play">f2</li>
<li class="play">f3</li>
<li id="g" class="play">g1</li>
<li class="play">g2</li>
<li class="play">g3</li>
<li id="h" class="play">h1</li>
<li class="play">h2</li>
<li class="play">h3</li>
<li id="i" class="play">i1</li>
<li class="play">i2</li>
<li class="play">i3</li>
<li id="j" class="play">j1</li>
<li class="play">j2</li>
<li class="play">j3</li>
<li id="k" class="play">k1</li>
<li class="play">k2</li>
<li class="play">k3</li>
<li id="l" class="play">l1</li>
<li class="play">l2</li>
<li class="play">l3</li>
<li id="m" class="play">m1</li>
<li class="play">m2</li>
<li class="play">m3</li>
<li id="n" class="play">n1</li>
<li class="play">n2</li>
<li class="play">n3</li>
<li id="o" class="play">o1</li>
<li class="play">o2</li>
<li class="play">o3</li>
<li id="p" class="play">p1</li>
<li class="play">p2</li>
<li class="play">p3</li>
<li id="q" class="play">q1</li>
<li class="play">q2</li>
<li class="play">q3</li>
<li id="r" class="play">r1</li>
<li class="play">r2</li>
<li class="play">r3</li>
<li id="s" class="play">s1</li>
<li class="play">s2</li>
<li class="play">s3</li>
<li id="t" class="play">t1</li>
<li class="play">t2</li>
<li class="play">t3</li>
<li id="u" class="play">u1</li>
<li class="play">u2</li>
<li class="play">u3</li>
<li id="v" class="play">v1</li>
<li class="play">v2</li>
<li class="play">v3</li>
<li id="w" class="play">w1</li>
<li class="play">w2</li>
<li class="play">w3</li>
<li id="x" class="play">x1</li>
<li class="play">x2</li>
<li class="play">x3</li>
<li id="y" class="play">y1</li>
<li class="play">y2</li>
<li class="play">y3</li>
<li id="z" class="play">z1</li>
<li class="play">z2</li>
<li class="play">z3</li>
</ul>
</div>
</div>
</body>

Jquery Menu UL LI insertion

I am bound by a menu embed in a CMS (dont have source code), so this is what the menu looks like
<li class="dir dgn-root Item-2">
<span>Menu1</span><div class="mega_submenu Column2 Column3" style="display: none;">
<ul class="mega_submenu_ul">
<li>
<ul>
<li class=" first-item SunItem-1">
<a href="#" title="Templates">
<span>Templates</span>
</a>
</li>
<li class=" SunItem-2">
<a href="#" title="Questions and Answers">
<span>Questions and Answers</span>
</a>
</li>
<li class=" SunItem-3">
<a href="#" title="Template Package">
<span>Template Package</span>
</a>
</li>
<li class=" SunItem-4">
<a href="#" title="Silver Package">
<span>Silver Package</span>
</a>
</li>
</ul>
</li>
<li>
<ul>
<li class=" SunItem-5">
<a href="#" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="#" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="#" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
What I need to try and do is
This is what it looks like now:
<li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
But I need to have Jquery or javascript insert a few HTML elements before this, so it looks like:
</li></ul><li><ul>
so it will look like this:
</li></ul><li><ul><li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
Any help is appreciated, I have tried
$(document).ready(function(){
$("img").before("<ul><li><b>Before</b></li></ul>");
});
But this does not seem to work, I have also tried this
<script>
(function() {
var lastItem = $("li.SunItem-8");
var currentList = lastItem.closest('ul');
var newList = $("</ul></li><li><ul>");
newList.insertAfter(currentList);
newList.append(lastItem);
})();
</script>
This seem to duplicate the text and does not actually form the HTML tags as expected - the html output looks like this once inserting the above script.
<li>
<ul>
<li class=" SunItem-5">
<a href="http://gentex/website-packages/gold-package.aspx" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="http://gentex/website-packages/platinum-package.aspx" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="http://gentex/website-packages/cms-features.aspx" title="CMS Features">
<span>CMS Features</span>
</a>
</li>
</ul>
<li>
<ul>
</ul>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</li>
</li>

You are not working with html, you can not just insert tags. You will need to remove() the element and append a the new list with that element.
var lastItem = $("li.SunItem-8");
var parent = lastItem.parent();
lastItem.remove();
var newUL = $("<ul>").append(lastItem);
parent.after(newUL);