Develop Reference

Adding class to menu item in Wordpress

I have menu with items. I want to add to tag class with name "name". I try to use:
var element = document.getElementById('myElement');
element.classList.add('myClass');
But the tag doesn't have any ID or class.
It's even possible with Javascript?
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>

If you really want to add the class with javascript, you can do:
var element = document.getElementById('menu-item');
element.getElementsByTagName("a")[0].classList.add('js-target-scroll');
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
But beware that the "onemenu" you are talking about is looking for this css-class and if your own script is not run before that, this won't work since the class is not yet added.
If it's your own theme you are developing, you can add the css-class server side with custom walker.

If you want to add the class for all menu item anchor tags, you can use the code below. If not, use what Esko has suggested in his answer and comments.
var menuItemLinks = document.querySelectorAll("#menu-main li a");
menuItemLinks.forEach(function(element) {
element.classList.add("myClass");
});
<ul id="menu-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

highlight current menu item with jquery

I need to higlight current category. I can do it like that, no problem:
javascript
var url = document.URL;
$('.nav a[href="'+url+'"]').addClass('active');
html
<div class="nav">
<ul>
<li>Category 1</li>
<li>Category 2</li>
</ul>
</div>
but i dont want to link to http://wholewebadress.com/catphp?cat.php?id=1 in html codes, instead i want to link to cat.php?id=1. So i want my html codes look like below;
<div class="nav">
<ul>
<li>Category 1</li>
<li>Category 2</li>
</ul>
</div>
Looks like, i need to edit my javascript code. Any ideas how to do that?

The following adds the active class to any link that contains id=1 in the URL:
$('.nav a[href*="id=1"]').addClass('active');
You can change the matching part ("id=1") to select whatever URL criteria you need.

Use var url = location.pathname + location.search;
W3Schools information
Edit: since it seems to need to parse for the ending:
var ending = url.slice(url.lastIndexOf('/'));

Jquery if hasClass then addClass

I know I can do this, I'm just getting lost in the hierarchy and need a second set of eyes on this.
Here's the structure 'm working with:
<div class="nav-column">
<ul>
<li>Link 01
<div>
<ul>
<li>Sublink 01</li>
<li>Sublink 02</li>
<li>Sublink 03</li>
</ul>
</div>
</li>
<li>Link 02</li>
<li>Link 03</li>
</ul>
<div class="home"><h3>Underlying Div</h3></div>
</div>
I am looking to do the following: when you hover over a .nav-column ul li a that visibility of div.home would turn off. Of course there are going to be multiple .nav-columns so I'm making this dynamic.
The jQuery I have right now is:
if ($('.nav-column li').hasClass('active')){
$(this).parent('.nav-column').sibling('div.home').toggleClass("off");
}
without yielding any class addition to the div.home. I already have a hover function adding and removing the class '.active' to the .nav-column li
EDIT EDIT EDIT
I see that I have made a mistake with my code, and in fact the correct code has the div.home OUTSIDE the div.nav-column
This is the proper heirarchy:
<div class="wrapper">
<div class="nav-column">
<ul>
<li>Link 01
<div>
<ul>
<li>Sublink 01</li>
<li>Sublink 02</li>
<li>Sublink 03</li>
</ul>
</div>
</li>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
<div class="home"><h3>Underlying Div</h3></div>
</div>
Once again... I am very sorry... you can sense my sanity levels dropping

Think this is what you want:
$('.nav-column li').each(function(){
if($(this).hasClass('active')) {
$(this).closest('.nav-column').siblings('div.home').toggleClass("off");
}
});
Fiddle:
http://jsfiddle.net/Jf8mp/
Your mistakes:
.sibling('div.home') is wrong, the correct name of method is .siblings()
if condition doesnt determine who is $(this), you have use a function as .each()
UPDATED:
to make it work on hover over .nav-column ul li a:
$('.nav-column li').on('mouseenter','a',function(){
if($(this).closest('li').hasClass('active')) {
$(this).closest('.nav-column').siblings('div.home').toggleClass("off");
}
});
Fiddle:
http://jsfiddle.net/Jf8mp/2/

You need to use .parents() instead of .parent(). .parents() traverses up multiple levels of the DOM while .parent() retrieves the immediate parent of the element matching the selector.
$(this).parents('.nav-column').siblings('div.home').toggleClass("off");
Since you're not targetting the direct parent (ul) of the element matching the selector, you'll need to use .parents() instead.
In addition, you have a second problem. According to your code structure div.home is not a sibling of .nav-column. You can use .find() for this instead.
Per your last edit, the previous statement is no longer applicable. The code snippets have been updated to reflect your edited change.
Alternatively, you could do the following to accomplish the same effect:
$(this).parents('.nav-column').next().toggleClass("off");

use .closest() or .parents() instead of .parent(). also div home is not sibling of .nav-column. You need to use .find() instead of .siblings().Try this:
$(this).closest('.nav-column').find('div.home').toggleClass("off");
or
$(this).parents('.nav-column').find('div.home').toggleClass("off");

the .parent() only goes up one node, you need to use .parents('select')

If I understand:
$('.nav-column li').forEach(elem, index){
elem = $(elem);
if (elem.hasClass('active')){
elem.addClass("Cheese");
}
}
This would add the class "Cheese" to any active li :)

hide href element in specific UL with javascript

How we can hide href element in specific UL element ( not in all UL elements, because UL elements are with the same name).
For example we have HTML code like this:
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
And we can hide these href's by using this code:
$('a.description').hide();
How should I change this javascript code, if I want to hide just one href element which is in the one UL element? Not all href elements with the class name "description" ?
Thank you for your help!

You can use attr href selector:
$('a[href="http://www.yahoo.com"]').hide();
Here is an example links, which you can use with different methods:
http://api.jquery.com/attribute-contains-selector/
http://api.jquery.com/attribute-ends-with-selector/
And this questions also related: jQuery cant access element with its attr href // simple tabs structure

You can traverse the dom to get the element within the parent ul
$(this).parent().siblings().find('a.description').hide();
// get current clicked > parent li > siblings > find a.description in li siblings > hide
http://jsfiddle.net/CjfXu/1/
EDIT
Since your li is actually wrapped inside a span also.. .parent won't work as it's getting the span element. You need to use .closest() - which gets the closest ancestor that matches
$(this).closest('li').siblings().find('.description').hide();
Also don't bind a click event inside another click event as that causes the dom to attach multiple event handlers to the element. Always bind inside the document.ready function. Dynamically created elements or when you have many elements that you need to bind, using delegation would be the most efficient way.
You had your code like this
$('a.start').bind('click', function(){ // <-- this should be $('a:not(.start)').bind
// code
$('a.start').click(function(e) {
$(this).parent().siblings().find('.description').hide();
});
});
Which is binding any anchors with class=start a click event each time the first anchor is clicked
to use delegation
$('parentElement').on('click','element', function(){
})
or jQuery 1.6 and below
$('parentElement').delegate('element','click', function(){
});

You should give proper ids to each <ul>:
<ul class="UL_tag" id="firstList">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag" id="secondList">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
And then:
$('#firstList a.description').hide();

HTML :
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
Jquery:
var d = $('.UL_tag li').children('a')[1]; // If you remove first href element change it to value "1" to "0"
$(d).hide();
See this Demo: http://jsfiddle.net/7aNRZ/8/

select the element by tagname and class, and then filter for href value:
$('a.description[href="http://www.google.com"]').hide();
you can also limit the result to only elements inside the class .UL_tag:
$('a.description[href="http://www.google.com"]', '.UL_tag').hide();

Thank you for your answers, I think all of these answers are also correct answers, but what I'm trying to achieve is a bit different. Actually there is 3 li elements (two of them are with href tag):
<ul class="UL_tag">
<li>There you can download something.</li>
<li>Download</li>
<li>Link to GOOGLE</li>
</ul>
When you click on the "Download" link, javascript will be called:
$(function(){
var seconds = 10;
var canClick = true;
seconds *= 1000;
$('a.start').bind('click', function(){
if(canClick){
var link = $(this).attr('href');
var loader = $('input[name="link"]').val();
$(this).html('<img src="' + loader + '"/>');
setInterval(function(){
window.location.reload();
window.location = link;
}, seconds);
// Description will be hidden everywhere.
// How we can hide description in only one
// row. In row where the a.start was called?
$('a.description').hide();
canClick = false;
}
return false;
});
});
It will show the "loading gif" and after 10seconds user will beredirect to the download page.
So is it possible to hide "description" in only one row not everywhere. Just in a row where we call this "start" function?
The biggest problem is to hide just one li element, when all UL's and li's have same class name.

Adding auto increment value to li element

im a css/designer guy so please excuse my lameness in not knowing any .js
basically i want to know how to add an auto incremental id to a list item with javascript / jquery for something that i am trying to add some css to.
before
<li id="">Item number 1</li>
<li id="">Item number 2</li>
<li id="">Item number 3</li>
after
<li id="1">Item number 1</li>
<li id="2">Item number 2</li>
<li id="3">Item number 3</li>
thanks in advance and especially just for reading this
tried all the responses, nothing has worked on a plain html page with nothing but the ul/li items.
thanks to all that tried, i have failed in a big way.....im not a coder

I'm going to give your li tags an encompassing ul with an id in case there are other li tags on the page that you don't want to order, but in jQuery this is pretty easy for:
<ul id="ordered">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</ul>
You would simply use the each method:
$('#ordered li').each(function(i,el){
el.id = i+1;
});
I would recommend using something other than just a plain integer for an id though, so maybe something like 'ordered' + (i+1) instead of just i+1 above.

Your tags say jQuery, so:
$("li").each(function(i){this.id = i})
So you can learn: you make a collection of HTML nodes with the $('foo') syntax. You use CSS selectors, so li will get -every- <li> on the page.
.each loops over those collected HTML elements, and does something to them. The 'something' is in the code function(i){this.id = i}. jQuery passes which loop you're on to the function as i, and the code inside the curly braces sets the id of that particular element to i.

If you need id's for styling, that's a bad idea. What you should do is use css 3 pseudo class :nth-child(n) which is in your area of css.

I'm going to wrap your code in a div so it's easier to code for
<div id="increment">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</div>
And js would be:
function loadcode(){
var increments = document.getElementById("increment");
var li = increments.getElementsByTagName("li");
for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1);
}
and in your HTML:
<body onload="loadcode()">