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.
Related
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 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");
});
});
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>
<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>