I am trying to pass the value of data-megamenu in the data-target of the same element in order to create a bootstrap 4 accordion menu. I tried the script below but always returns the value of the last element.
Thank you in advance
HTML
<ul class="level2">
<div class="categories">
<li class="menu" data-megamenu="cat1" data-target="#cat8" data-toggle="collapse">
<a href="#">
<span class="icon icon-eikona_ixos"></span>
<span class="text">Category1</span>
</a>
</li>
<div class="megamenu" id="cat1"></div>
</div>
<div class="categories">
<li class="menu" data-megamenu="cat2" data-target="#cat8" data-toggle="collapse">
<a href="#">
<span class="icon icon-eikona_ixos"></span>
<span class="text">Category2</span>
</a>
</li>
<div class="megamenu" id="cat2"></div>
</div>
<div class="categories">
<li class="menu" data-megamenu="cat3" data-target="#cat8" data-toggle="collapse">
<a href="#">
<span class="icon icon-eikona_ixos"></span>
<span class="text">Category3</span>
</a>
</li>
<div class="megamenu" id="cat3"></div>
</div>
<div class="categories">
<li class="menu" data-megamenu="cat4" data-target="#cat8" data-toggle="collapse">
<a href="#">
<span class="icon icon-eikona_ixos"></span>
<span class="text">Category4</span>
</a>
</li>
<div class="megamenu" id="cat4"></div>
</div>
</ul>
JQUERY
$(function () {
var li1 = $(".categories .menu");
$.each(li1, function (index, element) {
var li1Value = $(this).attr("data-megamenu");
console.log(li1Value);
li1.attr("data-target", "#" + li1Value);
li1.attr("data-toggle", "collapse");
});
});
Try like below
$(function () {
var li1 = $(".categories .menu");
$.each(li1, function (index, element) {
var li1Value = $(this).attr("data-megamenu");
console.log(li1Value);
//li1.attr("data-target", "#" + li1Value);
$(this).attr('data-target', li1Value);
li1.attr("data-toggle", "collapse");
});
});
Related
I try to add class in li tag but it's not able to add via javascript function but it's just append on li tag while page is loading then it is disappeared. Can you ju help us how can i solve it?
active class is not set while we are selected to while we are click to one menu
html code
<div class="side-bar-wrap sidbr" id="sideBarsec">
<nav class="side-bar" style="width: 325px;background:linear-gradient(0deg, #37C4AA,#0B99A7);height:1382px;;">
<div class="logo-area">
<a href="{% url 'home' %}">
<img src="{% static 'website/vendors/images/Rectangle_33.png' %}" alt="" style="width: 176px; height:58px" />
</a>
</div>
<ul class="menu" id="navMenus">
<li class="homeicn nav-item">
<a href="{% url 'home' %}">
<span class="title menutitle">Client</span>
</a>
</li>
<li class="medicalicn nav-item">
<a href="#">
<span class="title menutitle">Medical</span>
</a>
</li>
<li class="socialicn nav-item">
<a href="#">
<span class="title menutitle">Social</span>
</a>
</li>
<li class="transporticn nav-item">
<a href="#">
<span class="title menutitle">Transportation</span>
</a>
</li>
<li class="activityicn nav-item">
<a href="#">
<span class="title menutitle">Activity</span>
</a>
</li>
<li class="foodicn nav-item">
<a href="#">
<span class="title menutitle">Food</span>
</a>
</li>
<li class="reportsicn nav-item">
<a href="#">
<span class="title menutitle">Reports</span>
</a>
</li>
<li class="scheduleicn">
<a href="{% url 'schedule' %}">
<span class="title menutitle">Schedule</span>
</a>
</li>
</ul>
</nav>
</div>
script code
<script>
$("#navMenus").on('click', 'li', function () {
alert("in navMenus click");
$("#navMenus li.active").removeClass("active");
// adding classname 'active' to current click li
$(this).addClass("active");
});
</script>
Try to write your jQuery code inside a document.ready
$(document).ready(function(){
$("#navMenus").on('click', 'li', function () {
alert("in navMenus click");
$("#navMenus li.active").removeClass("active");
// adding classname 'active' to current click li
$(this).addClass("active");
});
});
i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:
const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');
// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {
toggler.addEventListener('click', toggleCart);
crossButton.addEventListener('click',closeCart);
function toggleCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
function closeCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
toggler is button that opens sidecart
cartWrapper is the sidecart
and crossButton the cross button that close the sidecart
Here is my sidecart:
If you want more information about my code i would appreciate it if you tell me, Thank you!
My html code:
<!-- Sidebar Cart-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 mt-auto titleCart">
<h2 class="titleText">YOUR CART</h2>
</div>
<div class="col-md-2" style="left:30%">
<div class="crossIcon" id="closeCart">
<span class="iconify closeIcon" data-icon="zmdi:close"></span>
</div>
</div>
</div>
</div>
<ul class="sidebar-nav">
<li class="cart-item">
<div class="cart-item-img">
<img src="imgProducts/guitar1.jpg" alt="">
</div>
<div class="cart-item-txt">
<a class = "cart-item-name" href="#">Miyiagi Guitar</a>
<span class="cart-item-price-qty">
1 x 16.00
</span>
</div>
<button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>
</li>
</ul>
<div class="col-md-12" style="margin-top:4em;">
<hr class="dividerLineCart">
<div class="cart-total">
<h2 class="cartTotal">Total: $0.00</h2>
</div>
</div>
<div class="col-md-12 d-flex buttonsCartDiv">
View Cart
Check Out
</div>
</div>
</div>
My navbar that includes the button that toggle my sidecart:
<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<a class="navbar-brand" href="index.php">
<img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li><hr class="dropdown-divider"></li>
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="guitars.php" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
Guitars
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="electrical-type.php">Electrical</a>
<a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
<a class="dropdown-item" href="basses-type.php">Basses</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
<span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
<span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
<span class="badge badge-notify">0</span>
</a>
</li>
</ul>
</div>
</nav>
Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !
if (cartWrapper.hasClass("menuDisplayed")) {
$("body").on("click", function() {
closeCart();
});
cartWrapper.on("click", function(event) {
event.stopPropagation();
});
});
Hope this Code will help you.
<script>
let sidebar = document.getElementById('sidebar-wrapper');
let navbarTogglerButton = document.getElementById('toggler-button');
window.document.addEventListener('click', (e) => {
let clickedArea = e.path[e.path.length-6]
if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
else {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
</script>
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>
I have multiple li rows like this
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
</ol>
I want to sort all the li rows by the span class "Status_online".
is this possible?
UPDATE
You can use a combination of closest() to find the each .Record_row that is an ancestor of each .Status_online. Then use .each() on each online .Record_row and use .before() to place them before the first .Record_row. In the Snippet notice that each item maintains it's content and ordered from the earliest to the current.
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
</script>
</body>
</html>
OLD
One of your tags is jQuery UI so I'm assuming that you are using it. You can you .sortable() method:
$('.DataList_row').sortable();
This is drag and drop, and I posted before you had commented further details of your need for this sorting to be dynamic...So standby...
SNIPPET
$('.DataList_row').sortable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.6.2/css/font-awesome.min.css">
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE</span>
</div>
</a>
</div>
</li>
</ol>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var olElement = $('.DataList_row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
console.log(sortedAttributes);
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
var clClass = cl.startsWith('ONLINE')?'online':'offline'
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + clClass + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
});
</script>
</body>
</html>
Here is how you can do it:
var olElement = $('.DataList_Row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + cl.toLowerCase() + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
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);