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.
Related
I want to delete text "previous" inside li in wordpress theme.
the text to delete
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
I tried with jquery like this :
var $ = jQuery;
$('li.flex-nav-prev').html('');
$('li.flex-nav-prev').html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
It's works in snippet but it doesn't work on website.
Thank you so much
To delete just the text of an element try this jquery code:
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();
I have a menu structure like this:
<ul>
<li>
<h3>pageA</h3>
<ul>
<li id="a1">1
</li>
<li id="a2">2
</li>
<li id="a3">3
</li>
<li id="a4">4
</li>
<li id="a5">5
</li>
</ul>
</li>
<li>
<h3>pageB</h3>
<ul>
<li id="b1">1
</li>
<li id="b2">2
</li>
<li id="b3">3
</li>
<li id="b4">4
</li>
<li id="b5">5
</li>
</ul>
</li>
</ul>
And I want to change<li> classes with javascript. I can change child <li> with following code. But i can't change class of parent <li>.
document.getElementById("a1").className = 'active';
Your solution should work to replace the class of an element with that ID.
Check out this page:
http://www.w3schools.com/jsref/prop_html_classname.asp
Example
Overwriting an existing class name with a new one:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName";
Example
To add a class to an element, without overwriting existing values, insert a space and the new class name:
document.getElementById("myDIV").className += " anotherClass";
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>
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)
I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below the menu goes three levels deep.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
<ul id="thirdLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>
Most menus will be generated as above, but also the one below (without the third level) is an option.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
</li>
</ul>
</li>
<ul>
</li>
</ul>
What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.
I've made a jsFiddle for you: http://jsfiddle.net/danAR/
jQuery code:
$(function() {
$('ul#secondLevel li').each( function(index, item) {
$(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
});
});
CSS:
a.aBold {
font-weight:bold;
}
I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:
var $third = $('#thirdLevel');
if ($third.length)
{
$third.closest('a').css('font-weight', 'bold');
}