If element has children html elements - javascript

I the following un-ordered list.
<ul>
<li>
<a class="hlink hlink-1" href="#"> Prank Boss Apps </a>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</li>
<li>
<a class="hlink hlink-2" href="#"> Uninstall an app. </a>
</li>
<li>
<a class="hlink hlink-3" href="#"> Contact Us </a>
</li>
</ul>
In the un-ordered list, not every list-item will have another un-ordered list.
<li> blah
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</li>
So some will just have a link inside of the list item and others will have a un-ordered list inside.
How can I check if the list item doesn't have another un-ordered list inside of it?

function hasChildULs(thisList)
{
if ($(thisList).children('ul').length > 0)
{
return true;
}
else
{
return false;
}
}

Once you've got a reference to the li element you can use this.
function isLeafNode(liElement) {
return !liElement.getElementsByTagName("ul").length;
}

This should get you started: http://www.w3schools.com/dom/dom_element.asp (if you don't want to use jQuery)

Related

Passing dynamically created IDs in slideToggle callback

I am creating a tree type navigation structure using jQuery. I have a html unordered list where there are categories and sub-lists inside those. When a user clicks a category the list items under that category slideToggle on and off. It works great until a user creates his own category. Then I need to activate the slideToggle method for that new category and sub-category.
The html structure looks something like this:
<ul>
<li> <span id="userCat_1">Cat 1</span>
<ul id="subCat_1>
<li> Button A </li>
<li> Button B </li>
<li> Button C </li>
</ul>
</li>
<li> <span id="userCat_2">Cat 2</span>
<ul id="subCat_2>
<li> Button Z </li>
</ul>
</li>
</ul>
This is my most recent attempt at adding the slideToggle functionality to all "categories" in the list. Here I'm trying to use the objects' IDs (userCat_x and subCat_x) to control the slideToggle.
categoryArray= ["1", "2", "3"]
function activateToggle(){
for (var i=0; i<categoryArray.length; i++){
$("#userCat_" + categoryArray[i]).click(function(i){
$("#subCat_" + categoryArray[i]).slideToggle();
});
}
}
I'm sure im missing some concept. Spent time looking for the answer and this question seemed to move me in the right direction. Toggle worked for new objects but it resulted in toggling other categories not the clicked on categories sub-categories.
You'll probably avoid the whole headache by just using event delegation and a shared class:
$(document).on('click', '.my-menu-class', function() {
$(this).children('ul').slideToggle();
});
<ul>
<li class="my-menu-class"> <span id="userCat_1">Cat 1</span>
<ul id="subCat_1">
<li> Button A </li>
<li> Button B </li>
<li> Button C </li>
</ul>
</li>
<li class="my-menu-class"> <span id="userCat_2">Cat 2</span>
<ul id="subCat_2">
<li> Button Z </li>
</ul>
</li>
</ul>

on click 'toggle' firing all classes with the name instead of the one clicked

I am currently having a fairly classic problem in jquery. When a class is clicked (within a ul) all elements with that class name are being toggled. I really only want the the elements to toggle to be the the element that is click, here is some of my code:
js:
$(function(){
var list = $('.lists');
list.on({
'click': function(){
$('.list-display').toggle('slow');
}
});
});
html:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
</li>
<li> Basketball </li>
<ul class='list-display'>
<li> Shoot </li>
<li> Dribble </li>
<li> Pass </li>
</ul>
<li> Baseball </li>
<ul class='list-display'>
<li> Catch </li>
<li> Throw </li>
<li> Hit </li>
</ul>
</ul>
When I click any li in the main ul (Soccer, Basketball, Baseball) all of the uls embedded in their category toggle. I only want the one clicked to toggle. How can I re arrange my function to only toggle the one clicked? I imagine I have to use the 'this' keyword but am unfamiliar with using it.
Try
list.on({
'click': function(){
$('.list-display', this).toggle('slow');
}});
I looks for .list-display items inside the currently clicked element.
Use this (Example):
$('.lists').on('click', 'li', function(){
$('ul.list-display', this).toggle('slow');
});
Also, you have wrong HTML, use something like this:
<ul class ='lists'>
<li> Soccer
<ul class='list-display'>
<li> Kick </li>
</ul>
</li>
<li> Basketball
<ul class='list-display'>
<li> Shoot </li>
</ul>
</li>
</ul>
You didn't put all uls inside li, you have two uls like this:
<li> Basketball</li>
<ul class='list-display'>
<li>...</li>
</ul>
<li> Baseball</li>
<ul class='list-display'>
<li>...</li>
</ul>

jquery get text of the parent li by their child li

how i can get "Goods" when i click under "Goods" link "Restricted","Open" similarly when how i can get "Services" when i click under "Services" link "Restricted","Open" similarly,thanks in advance
JavaScript:
$('.goodsLink li a').click(function(){
alert( $('#nav li ul li a').html());
return false;
});
HTML:
<ul id="nav">
<li>Create a New Tender
<ul>
<li><strong>+</strong> Goods
<ul>
<li><strong>-</strong>&nbspSingle
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong>&nbspFramework
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
<li><strong>+</strong> Services
<ul>
<li><strong>-</strong>&nbspSingle
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong>&nbspFramework
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You can use something like this:
$('.goodsLink li a').click(function() {
alert( $(this).parents('li:contains("+")').children("a:first").text());
return false;
});
But the best way should be for you to use a class or tribute to better identify the element you want to find. That way you cold replace the :contains("+") with a .topParent
She this examples:
example with contains
example with class

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}
Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)
This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

How to append a span to a <li> if a submenu exists

I'm trying to build a responsive navigation and want to append a <span> to all top level menu items that contain a submenu <ul>. For some reason this just appends the span to all items, can anybody advise as to why?
Here's the markup:
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
Home
<ul class="nav-submenu">
<li class="nav-submenu-item">
Submenu item 1
</li>
<li class="nav-submenu-item">
Submenu item 2
</li>
<li class="nav-submenu-item">
Submenu item 3
</li>
<li class="nav-submenu-item">
Submenu item 4
</li>
</ul>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Portfolio
</li>
<li class="nav-item">
Testimonials
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
So you can see the first item has a dropdown, and I want to dynamically append a span element to each <li> that contains a submenu.
And the script (jQuery):
$.each($('.nav-item'), function (index, value) {
if ($('.nav-item').children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
Help appreciated!
Actually this is all you need:
$('.nav-item:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
using :has or .has() will be much more fun than all this $.each looping. The class looping is already done using class as selector cause returns a collection of your desired elements additionally filtered by has, all in one line.
http://api.jquery.com/has-selector/
http://api.jquery.com/has/
In the case you're planning to have a multi-sub-level list use:
$('nav li:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
Try this
$.each($('.nav-item'), function (index, value) {
if ($(this).children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
You have problem in this line:
if ($('.nav-item').children('ul').length > 0) {
this will always select first .nav-item found
you need to use this instead as you are looping through each .nav-item
if ($(this).children('ul').length > 0) {

Categories

Resources