I'm working on something similar to that : http://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers/
But with multiple "checkbox" like this
<ul>
<li><a href='#' class='filter' id='douze' value='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' value='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' value='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' value='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' value='2012'>2012</a></li>
<li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>
I'm tyring to get the value linked to "checkbox" but it doesn't work.
var douze = "";
var inputElements = document.getElementsByClassName('filter');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].className==="filter" && inputElements[i].checked){
douze = inputElements[i].value;
//console.warn(douze)
break;
}
}
It's trying to running here : http://temp.sharesand.info/prison/index5.html#
I'm trying to do it on plain JS, but i saw many versions with jquery.
here is the required
<ul>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2012'>2012</a></li>
<li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>
and use this in js file
function abc(me)
{
alert(me.name);
}
Akash Sarawagi did gratefuly the first part and the rest of the code has been changed a little bit.
div id='map-ui'>
<ul>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2008'>2008</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2009'>2009</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2010'>2010</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2011'>2011</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2012'>2012</a></li>
<li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2013'>2013</a></li>
<li>Toutes les années</li>
</ul>
</div>
<div id='map'></div>
<div id='info'></div>
<script type='text/javascript'>
//loading background
var map = L.mapbox.map('map', 'n3b.map-xb4fp4td', { zoomControl: false })
.setView([47.145894, 2.581787], 6);
//loading markers
var markerLayer = L.mapbox.markerLayer()
.loadURL('http://temp.sharesand.info/prison/mortsPrisons.geojson')
.addTo(map);
//filter per year
var year = "all";
function selectyear(me)
{
var year = me.name;
document.querySelector('#map-ui a.active').classList.remove('active');
me.classList.add('active');
markerLayer.setFilter(function(f) {
if (year == "all") return true;
return (f.properties['DateTime'].indexOf(year) != -1);
});
};
Thanks to all for your help.
Related
I'm using a bootstrap popover to show a list of available actions for a list of recipients.
Popover:
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
The above is triggered by the below HTML:
<a class="btn btn-link text-white" tabindex="0" role="button" data-html="true" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="auto" data-content=" #include('recipient.actions-popover') ">
Then issue is when I try to run javascript on the popover it isnt working. For example, if I try and run:
$(document).on('change', '.checkable', function(e) {
console.log("testing");
$(".popover-item").removeClass('disabled');
});
The disabled class does not get removed although I do see the testing console log.
Can anyone help get the above working?
If you just want to remove a class when the checkbox change, this works fine :
$(".checkable").change(function() {
$(".popover-item").removeClass('disabled');
});
.disabled{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='list-unstyled recipients-popover'>
<li><a href='#' class='popover-item' onclick='openAddContactModal()'><i class='test'></i> Add contact</a></li>
<li><a href='#' class='popover-item'><i class='test'></i> Add contact list</a></li>
<li><a href='#' class='popover-item disabled' onclick='deleteContacts()'><i class='test'></i> Delete contacts</a></li>
<li><a href='#' class='popover-item' onclick='openAddGroupModal()'><i class='test'></i> Create new group</a></li>
<li><a href='#' class='popover-item disabled' onclick='openAddContactToGroupModal()'><i class='test'></i> Add contacts to group</a></li>
<li><a href='#' class='popover-item disabled'><i class='test'></i> Remove contacts from Group</a></li>
<li><a href='#' class='popover-item' onclick='openDeleteGroupModal()'><i class='test'></i> Delete Group</a></li>
<label>Checkable</label> <input type="checkbox" name="recipient[3]" class="checkable" contactid="3">
With below html data can i get output like below !!
Directory structure:
10000
22222
TEST1
|-- 10000_old
| `-- 55555
|-- 10001
`-- 10006
TEST2
|-- 10002
|-- 10005
`-- 11000_old
`-- 20001
TEST3
|-- 10003
|-- 10004
|-- 11000_old
| `-- 10001
`-- 12000_old
`-- 10000
HTML Data :
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Output data :
onclick of 22222, get output as text like "22222".
onclick of 55555, get output as text like "TEST1/10000_old/55555"
onclick of 10005, get output as text like "TEST2/10005"
onclick of 50000, get output as text like "TEST3/12000_old/50000"
You can use .parentsUntil("ul.file-tree") and pick each li. On each iteration fetch the id of first a inside it.
$(".treeclass a").on("click", function(){
var path = [];
$(this).parentsUntil("ul.file-tree").each(function(){
if($(this).is("li"))
path.push($(this).children("a").eq(0).attr("id"));
});
var actualPath = path.reverse().join("/");
console.log(actualPath);
});
$(".treeclass a").on("click", function(){
var path = [];
$(this).parentsUntil("ul.file-tree").each(function(){
if($(this).is("li"))
path.push($(this).children("a").eq(0).attr("id"));
});
var actualPath = path.reverse().join("/");
console.log(actualPath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Use parentsUntil, forEach, filter and map
$( "a" ).click( function(e){
e.preventDefault();
var value = $(this).parentsUntil( ".file-tree" ).filter( (s, i) => i.nodeName == "LI" ).map( (s, i) => i.querySelector( "a" ).innerHTML ).get().join( "/" );
console.log( value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='file-tree' style='padding-left: 0px;'>
<li class='treeclass'><a href='#' id='10000'>10000</a></li>
<li class='treeclass'><a href='#' id='22222'>22222</a></li>
<li class='treeclass'>
<a href='#' id='TEST1'>TEST1</a>
<ul class='new_ul'>
<li class='treeclass'>
<a href='#' id='10000_old'>10000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='55555'>55555</a></li>
</ul>
</li>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
<li class='treeclass'><a href='#' id='10006'>10006</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST2'>TEST2</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10002'>10002</a></li>
<li class='treeclass'><a href='#' id='10005'>10005</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='20001'>20001</a></li>
</ul>
</li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='TEST3'>TEST3</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10003'>10003</a></li>
<li class='treeclass'><a href='#' id='10004'>10004</a></li>
<li class='treeclass'>
<a href='#' id='11000_old'>11000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='10001'>10001</a></li>
</ul>
</li>
<li class='treeclass'>
<a href='#' id='12000_old'>12000_old</a>
<ul class='new_ul'>
<li class='treeclass'><a href='#' id='50000'>50000</a></li>
</ul>
</li>
</ul>
</li>
</ul>
I have this code that I'm trying to figure. Basically what I need is to slice or copy only the parent elements which Program 1, Program 2, Program 3 and Program 4 inside the list and not including the child elements.
I can't seem to find an answer in my problem and I believe you cannot get specific elements using jQuery slice
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList.slice(0);
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
Make these changes to your code:
Change nonDegList to this: nonDegList = $('li a', nonDegMenu)
Now you can just append course to items like this: items.append(course)
See demo below:
var menuContainer = $('<ul class="menu" />');
var nonDegMenu = $('#header a[href$="/programs"]').next().clone(),
nonDegList = $('li a', nonDegMenu),
nonDeg = $('#footer .programs-menu .non-degree'),
items = menuContainer.appendTo(nonDeg),
course = nonDegList;
//Append Non Degree Courses
items.append(course);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li>Sub Programs A</li>
<li>Sub Programs B</li>
<li>Sub Programs C</li>
<li>Sub Programs D</li>
</ul>
</li>
<li>
Programs 2
<ul>
<li>Sub Programs E</li>
<li>Sub Programs F</li>
<li>Sub Programs G</li>
<li>Sub Programs H</li>
</ul>
</li>
<li>
Programs 3
<ul>
<li>Sub Programs I</li>
<li>Sub Programs J</li>
<li>Sub Programs K</li>
<li>Sub Programs L</li>
</ul>
</li>
<li>
Programs 4
<ul>
<li>Sub Programs M</li>
<li>Sub Programs N</li>
<li>Sub Programs O</li>
<li>Sub Programs P</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
I'm looking for a way on how I can output or get the first level of lists which is Program 1, Program 2, Program 3 and Program 4 but not including the child lists or child elements inside of it.
As it appears you're interested in the text "which is Program 1.." and don't need the items themselves, you can extract this "first level" of lists into an array using:
var list = $("#header>ul>li>ul>li>a").map(function() {
return $(this).text();
}).get()
(this appears to be the second-level to me as the first level would be #header>ul>li>a and give just Programs).
Normally it would be better to add classes or different <h1> <h2> levels which would make finding the items easier and less brittle, but (as per comments) this is not an option.
You can then use .slice as needed. If you need the first, it would be:
list.slice(0,1);
this would be the same as:
list[0];
Note that .slice(0) will return all the items so has no effect. Omitting the second argument extracts through the end of the sequence (arr.length).
If you need the links themselves (the whole node, not just its text) then there's no need for map:
var list = $("#header>ul>li>ul>li>a");
items.append(list);
the purpose of .slice is for example I want items Program 2, Program 3 and Program 4. Excluding Program 1 from the list
You can use .slice against the jquery array, using the correct arguments.
To exclude the first (see code snippet for working example of this):
list.slice(1);
to get first 2 items:
list.slice(0,2)
More info on slice: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
//var list = $("#header>ul>li>ul>li>a").map(function() { console.log($(this).text()); return $(this) }).get()
var list = $("#header>ul>li>ul>li>a")
$("#course").append(list.slice(1))
#course a { display:block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<hr/>
<div id='course'></div>
<hr/>
<div id="header">
<ul>
<li>
Programs
<ul>
<li>
Programs 1
<ul>
<li><a href="#" >Program A</a></li>
<li><a href="#" >Program B</a></li>
<li><a href="#" >Program C</a></li>
<li><a href="#" >Program D</a></li>
</ul>
</li>
<li>
Programs 2
<ul>
<li><a href="#" >Program E</a></li>
<li><a href="#" >Program F</a></li>
<li><a href="#" >Program G</a></li>
<li><a href="#" >Program H</a></li>
</ul>
</li>
<li>
Programs 3
<ul>
<li><a href="#" >Program I</a></li>
<li><a href="#" >Program J</a></li>
<li><a href="#" >Program K</a></li>
<li><a href="#" >Program L</a></li>
</ul>
</li>
<li>
Programs 4
<ul>
<li><a href="#" >Program M</a></li>
<li><a href="#" >Program N</a></li>
<li><a href="#" >Program O</a></li>
<li><a href="#" >Program P</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="footer" >
<div class="programs-menu">
<div class="non-degree">
</div>
</div>
</div>
I have a multilevel (tree) menu built with HTML <ul> and <li>. This is a sample of that markup:
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My goal is to select all <li> nodes that has no children. I want to get the "leaves" of the tree, those elements that have no children, the final nodes.
How can I do this with jQuery?
You should be able to use either of the following:
$(".dl-menu li:not(:has(li))")
or
$(".dl-menu li:not(:has(ul))")
I assume you want all links:
$('li:has(a):not(:has(ul))')
$('li:has(a):not(:has(ul))').each(function(){
console.log(
$(this).html()
);
});
es-console-wrapper{
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
One thing to note here - in your example, NONE of your nodes are empty. They all have children. Some have an "a" tag, and some have a "a" AND "ul" tag. Based on your example, it looks like you want to select all "li" elements that have NO "ul" tags as children. This is called a "parent selector", and cannot be done with CSS alone (unfortunately). But it can be done in javascript, and since you want an answer in javascript, this should work:
$('li:not(:has(ul))').addClass('link');
You can further refine your query as needed.
jsFiddle: https://jsfiddle.net/mspinks/68tguxza/
If you're looking only for li element without ul children then you can do this.
$('li:not(:has(ul))')
<div id="wrapDesktopNavBar">
<ul class="desktopNavBar" id="accordion">
<li>
<form class="search">
<input type="text" placeholder="Search here" required>
</form>
</li>
<li><a class="firstLevel" href="#home" onclick="callthis()">Main Category 1</a></li>
<li><a class="firstLevel" href="#">Main category 2</a>
<ul>
<li><a class="secondLevel" href="#">Sub Category 1</a>
<li><a class="secondLevel" href="#">Sub Category 2</a>
<li><a class="secondLevel" href="#">Sub Category 3</a>
<li><a class="secondLevel" href="#">Sub Category 4</a>
<li><a class="secondLevel" href="#">Sub Category 5</a>
<li><a class="secondLevel" href="#">Sub Category 6</a>
</ul></li>
<li><a class="firstLevel" href="#">Main Category 3</a></li>
<li><a class="firstLevel" href="#">Main category 4</a>
<ul>...
This is my html and my javascript to get the sub categories to slide up:
$("#accordion > li").on('click', function () {
if (false == $(this).next('ul').is(':visible')) {
$('#accordion > ul').slideUp(300);
}
$(this).next('ul').slideToggle(300);
});
but when i clicked the main category, the sub categories won't come out. it's supposed to slide out nicely like the jquery ui accordion. Please help. I'm not very sure why the sub categories are not showing.
FIDDLE
$('.firstLevel').click(function () {
$(this).next().toggle(300);
});