I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();
Related
I have filter on my website. There are categories and it display services from category when you click on that category link.
I want to add animation for those posts, so when I click on category to animate those posts. I made animation and all I need is to add fade-in-services class to every post when I click on his category, and before that to remove if that post have fade-in-services class.
I have two lists, one for categories, other for posts and that looks like this
<ul class="subcats">
<li>
All
</li>
<li>
Cat1
</li>
<li>
Cat2
</li>
</ul>
<ul id="posts">
<li>
<a href="#">
<div class="fade-in-services">Post 1</div>
</a></li>
<li>
<a href="#">
<div class="fade-in-services">Post 2</div>
</a>
</li>
<li>
<a href="#">
<div class="fade-in-services">Post 3</div>
</a>
</li>
</ul>
So when you click on All it displays all three posts, when click on Cat1 displays only Post 1 and Post 2, and when you click on Cat2 displays Post 3.
jQuery('.subcats li').click(function() {
jQuery('.hp-single-service').addClass('fade-in-services');
jQuery(this).removeClass('fade-in-services');
});
and this work but not always, because jQuery(this) catch .subcats li and doesn't remove class fade-in-services. So when I go throw categories, if same post is in two categories that post doesn't animate because it have fade-in-service class.
How can I fix this?
Thank you!
I'm not sure your code does what you think it does. It does the following:
Sets an on click event on the 3 li in the ul.subcats
When one of the li is clicked it:
2a. Adds .fade-in-services to all elements with .hp-single-service
2b. Removes .fade-in-services from the clicked li
2bi. (which doesn't have the class at any point)
Say I have a menu that goes 4 to 5 levels deep. In most cases, selecting the menu will open up the same. Here is some html:
<div class="container">
<div class="trigger">Click Here</div>
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li>
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
</div>
How can I make it so that if you click on "Third", and you go to that page, that when you get to that page and click on the menu again, that it will open up showing the "Third" title at the top with its children instead of opening it up like it would normally do?
If the page is loaded (after kicking a link)
you need to indicate first which page has been loaded for example: blah3.aspx or blah4.aspx
Then in Order to rearange the list, u must get the html content of the list-item that should be shown on top menu.
<div class="menu">
<ul>
<li>
Main
<ul>
<li>
First
<ul>
<li id="page3">
Third
<ul>
<li>
Five
</li>
<li>
Six
</li>
</ul>
</li>
<li>
Fourth
</li>
</ul>
</li>
<li>
Second
</li>
</ul>
</ul>
</div>
Example here if page 3 has been loaded:
Get inner html content:
var treeStructure = $("#page3").html;
Remove the list-item from list with the jQuery remove method:
$("#page3").remove();
Add saved content to the beginning of the list with the jQuery prepend method:
$(".menu ul").prepend("<li>" + treeStructure + "</li>");
I am trying to make a piece of code that will change the content of my webpage by clicking on links. It hides the div displayed now and replaces it with another one.
The html is this:
<ul>
<li> <a href="#" id="Overview_button" > Overview </a> </li>
<li> Backgrounds</li>
<li> Boxes </li>
<li><a href="#" id="Colors" > Colors</a> </li>
<li> Navigation</li>
<li> Positioning</li>
<li> Text </li>
<li> Conclusion </li>
</ul>
Right now the function is only applied to the second element since thats the one I am testing with. The id 'Backgrounds' refers to a div later in the text.
The javascript is:
var currentContent = 'Overview';
function changeContent(newContent) {
document.getElementById(currentContent).style.display = "none";
document.getElementByID(newContent).style.display = "block";
currentContent = newContent;
};
It succesfully hides the old content, but does not show the new.
document.getElementByID
Should be
document.getElementById
Anyway, you should check errors in your console before posting such questions.
I'm trying to get a different image to show up when the page that is clicked on or that "active" can be dynamic, using javascript/jQuery. I would like to put a unique ID for each li and use javascript.
I'm very new to javascript and don't really know where to start. Any help would be great. Thanks.
<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class="active nav-edit " id="nav-main-menu">
<li class=" nav-link active ">
ABOUT
</li>
<li>
FOR TEACHERS
</li>
<li>FOR STUDENTS
</li>
<li>FOR PARENTS
</li>
<li>CONTACT US </li>
<li>REGISTER </li>
</ul>
jQuery: You can use .each and the incrementing index in the callback function:
$("#nav-main-menu li").each(function(index) {
$(this).attr("id", "id" + index);
});
Each li will now have an ID starting at id0 to however long the list is.
You could try this if you don't want a numeric ID:
$('li').each(function(){
$(this).attr('id',$(this).text().trim().toLowerCase().replace(' ','_'));
})
Asuming each li element has a link with a different text description, this will assign each li element with an id equal to the text value in lowercases and with spaces replaced by underscores.
JSBin Demo
I have a dynamically built unordered list like below, and I want to find a way to expand all the nodes above the link with a certain id once the list is loaded using jquery,
For example I might want to expand all the nodes required for the link with the id=1905 to be visiblem and leave all other nodes collapsed.
Hope this makes sense.
<div id="menu">
<ul>
<li><a class="inactive" href="#"><img src="images/folder.png">Baking</a>
<ul>
<li><a class="inactive" href="#">Bars</a>
<ul>
<li><a id="1905" class="rlink" href="url">Rasberry Crumb Breakfast Bars</a></li>
</ul>
</li>
</ul>
</li>
<li><a id="1803" class="rlink" href="url">text</a></li>
</ul>
</div>
So the list would initially load like this
And I would want to expand it like this
You could try going up the parent nodes of the element you want and activate them:
var parentList= $('#link1905').closest('ul');
while (parentList.length > 0) {
parentList.prev('a').removeClass('inactive'); /* and/or .addClass('active'); */
parentList = parentList.closest('ul');
}
Also you must start your element id's with a letter: What are valid values for the id attribute in HTML?