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>

Getting text from html - Casperjs and Javascript

I'm trying to get the text: sub1, sub2, sub3 of the li from example bellow with javascript while scraping with CasperJS. There are maybe 30 list elements.
This is the string:
<li class="sb-option " onclick="javascript:s4.setState('5_43022,9_overview,239_t272‌​76,242_21',false);">‌​Sub 1</li>
<li class="sb-option " onclick="javascript:s4.setState('5_43022,9_overview,239_t272‌​78,242_21',false);">‌​Sub 2</li>
<li class="sb-option " onclick="javascript:s4.setState('5_43022,9_overview,239_t272‌​80,242_21',false);">‌​Sub 3</li>

Use casper.fetchText(selector)
as per your requirement, you can use js array to store multiple html text. :)

Remove class isn't working with id #.parent?

I'm trying to remove a class of an element that contains an with an href. I have the href retrieved, however how come I can't remove the class this way?
script:
...
$('#panel1').parent('li').removeClass('active'); //doesn't work....
...
html:
...
<ul class = "tab-links">
<!-- Each tab is Anchored to its Contents -->
<li class = "active">Panel 1</li>
<li>Panel 2</li>
<li>Panel 3</li>
<li>Panel 4</li>
</ul>

You need quotes around the argument to $(). Also, #xxx selectors are used to search for an ID, but your anchors don't have IDs, they just have href. You need to do:
$("a[href='#panel1']").parent('li').removeClass('active');

You need quotes around you id selector
$('#panel1').parent('li').removeClass('active'); //doesn't work....

How to select a content from dropdown and be the first one to be appeared in Boostrap

I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?

Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});

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