Add a unique ID to a menu item list - javascript

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

Related

How do I access a list where "li" elements contain it's child "a"?

var array = [];
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
I want to put every "a" element into array. After I access to a "li" element, I can't go any further in reaching element "a".
I know it looks easy, but I can't figure it out for some reason, please help
It's not very clear what your after here. But here is a simple example of how you can get these elements in a browser.
var array = document.querySelectorAll('li a');
console.log(array);
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
the query li a says select all a contained in a li tag. Docs on querySelectorAll

Dynamically calling attirb value from li class through jQuery

Could you please help me in dynamically calling attrib value through jQuery from the 'li class' by identifying the 'itemprop'?
My HTML is as below,
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
I want to dynamically call Model value into a JS code i.e., 32LJ573D
console.log($('ul li[itemprop="model"].specText').first().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
You need to pick li inside your ul with a specific class. The following code will work for you. I have printed text of li with class "specText" for reference. You could modify any attribute as per your requirement.
console.log($('ul li[itemprop="model"].specText').first().text());
When you choose elements by classname, multiple elements are returned in an array. So choose the first element by adding index [0].
$('.classname')[0].innerHTML

targeting a li with javascript without a ID

I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.
This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.
You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps
You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>

Javascript variable setting - list items

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();

How to expand an unordered list down to a certain link

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?

Categories

Resources