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>

Jquery Complex wrap around uncontained group of items

I'm trying to take group of headers and lists, and contain them individually so I can style them. ie:
<h2>Title 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Title 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I attempted this by using .before() and .after to add a div before the h2 tag, and close it after each ul however I found out that jquery cleans and closes the tag automatically. So I'm guessing I need to use wrap() just not sure how to group the title and list together.

Use
$('h2').each(function(){
var self = $(this);
self.add( self.next() ).wrapAll('<div/>');
});
demo at http://jsfiddle.net/gaby/e4f9h/

You want to create a jQuery collection that contains both elements. For this you would select the h2 elements. You than would need to find the next() element that is a ul. After you get both of them linked, you would wrapAll() with your containing div.
$("h2").each( function(){
var h2 = $(this);
h2.add(h2.next("ul")).wrapAll('<div class="madWrapper"></div>');
});​​​​​​
jsFiddle

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.

Hide a set number of list objects

I have multiple list objects with the same structure on a page:
Example:
<div class="mainWrapper">
<div class="listWrapper">
<ul>
<li>Object One</li>
<li>Object Two</li>
<li>Object Three</li>
<li>Object four</li>
<li>Object five</li>
</ul>
</div>
<div class="listWrapper">
<ul>
<li>Object One</li>
<li>Object Two</li>
<li>Object Three</li>
<li>Object four</li>
<li>Object five</li>
</ul>
</div>
</div>
Using jQuery, how can I set it so that for each list, only the first 3 objects are showing in each list and the rest are hidden?

You can use :gt() pseudo selector which select all elements at an index greater than index within the matched set.
$('.listWrapper').find('li:gt(2)').hide();
Demo

Try the :gt() (greater than) selector:
$('.listWrapper ul').find('li:gt(2)').hide();
jsFiddle
It's necessary to query the targeted lis in two passes using an additional find(). Otherwise if there are multiple uls, all lis will be treated as a single collection, and only 3 total list items will be shown. This way we hide() selected items as many times as there are lists.
NOTE: You want your initial query to get down to the list itself.
See :gt() selector documentation.

http://jsfiddle.net/GEbxG/
$('div.listWrapper li').each(function(i, elem) {
if($(elem).index() < 3) return;
$(elem).hide();
});

$('.listWrapper li').show().slice(3).hide();
http://api.jquery.com/slice/
You can remove the .show() if all elements are visible initially.
If you don't already have the jQuery object containing all the li elements and/or don't need access to the full element list, you can avoid selecting them at the first place:
$('.listWrapper ul li:gt(2)').hide();

How to Insert an incremental variable with Javascript/Jquery?

This, I'm sure is a pretty basic question about JavaScript, so apologies in advance.
I have simple unordered list:
<ul>
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
<li>Item number 4</li>
<li>Item number 5</li>
</ul>
How would I be able to prepend an incremental number to those 5 items,
so I get:
<ul>
<li><span>1</span>Item number 1</li>
<li><span>2</span>Item number 2</li>
<li><span>3</span>Item number 3</li>
<li><span>4</span>Item number 4</li>
<li><span>5</span>Item number 5</li>
</ul>
The logic behind the increment variable is getting me.

You can iterate over the elements using $.each, using the index argument on the callback function, then build the span element using the current element, and we prepend it to the li:
$('ul li').each(function (i) {
$('<span>'+ (i+1) +'</span>').prependTo(this);
// or $('<span></span>').html(i+1).prependTo(this);
});
Check the above snippet here.
Note that I'm adding one to the index i+1, that's because the indexes are zero-based, also I wrap the addition between parentheses because it is in the middle of a string concatenation.

In steps it'd look like this:
You take all LI items and iterate through all of them by adding span with (lis[index]+1)
Next time you insert a LI element you insert it with span who's text is lis.length+1.