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";
Related
I want to exclude <li> with specific text in the <a> tag
HTML:-
<ul>
<li class ="Group Select">
<span><a>Good</a></span>
</li>
<li class ="Group NotSelect">
<span><a>Bad</a></span>
</li>
<li class ="Group NotSelect">
<span><a>What</a></span>
</li>
<li class ="Group NotSelect Hidden">
<span><a>Better</a></span>
</li>
<li class ="Group NotSelect">
<span><a>Best</a></span>
</li>
<li>
<span><a>BadDuplicate</a></span>
</li>
In The end, I want li with class Group Select or Group NotSelect but not Group NotSelect Hidden and I do not want li which has "What" in its <a> tag
So far
$possibleli = $('li.Group').not("[class='Group NotSelect Hidden']");
This gives me all li's that I need but I want to remove li that has what in its <a> tag
Use the :contains() selector combined with the .not function (or the not selector combined with the :contains selector) like this:
$possibleli = $('li.Group').not("[class='Group NotSelect Hidden']").not(':contains(What)');
or
$possibleli = $('li.Group:not(.Hidden):not(:contains(What))');
$(".Group.Select, .Group.NotSelect").not(".Hidden, :contains('What')").addClass("red");
.red{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want li with class Group Select or Group NotSelect <br>
but not Group NotSelect Hidden <br>and I do not want li which has "What" in its A tag
<ul>
<li class ="Group Select">
<span><a>Group Select</a></span>
</li>
<li class ="Group NotSelect">
<span><a>Group NotSelect</a></span>
</li>
<li class ="Group NotSelect">
<span><a>What</a></span>
</li>
<li class ="Group NotSelect Hidden">
<span><a>Group NotSelect Hidden</a></span>
</li>
<li class ="Group NotSelect">
<span><a>Group NotSelect</a></span>
</li>
<li>
<span><a>BadDuplicate</a></span>
</li>
</ul>
I have following design of a ul list.
<ul>
<li class="category">
Design
<ul>
<li>Graphic Design</li>
<li>Web Design </li>
<li>HTML</li>
<li>CSS</li>
<li>Print</li>
</ul>
</li>
<li class="category">
Development
<ul>
<li>PHP</li>
<li>Java</li>
</ul>
</li>
</ul>
Now what I want is if you click on the "CSS" item ,I want to get the text of its parent i.e "Design".
I have tried the following code but I got the whole list in it.
$('ul').on("click", "li", function (e) {
console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text());
});
Try replacing this part
$(this).parents(".category").text()
with
$(this).parents(".category")[0].childNodes[0].textContent;
childNodes returns all the child elements including text nodes.
If you want to use jQuery only, then wrap this textnode inside a span
<ul>
<li class="category">
<span>Design</span>
<ul>
<li>Graphic Design</li>
<li>Web Design </li>
<li>HTML</li>
<li>CSS</li>
<li>Print</li>
</ul>
</li>
<li class="category">
<span>Development</span>
<ul>
<li>PHP</li>
<li>Java</li>
</ul>
</li>
</ul>
and fetch that first node's text using
$(this).parents(".category span").html()
Another approach could be to use contents and filter of jquery
$(this).parents(".category").contents().filter(function() {
return this.nodeType == 3;
}).nodeValue;
just change :
console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parents(".category").text());
with :
console.log("Child Clicked: "+$(this).text()+" Parent: "+$(this).parent().text());
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>
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> Single
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
<li><strong>+</strong> Services
<ul>
<li><strong>-</strong> Single
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<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
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.