Develop Reference

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>

how do I wrap my menu in to sub menu using jquery?

this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.

In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?

How to hide an element after clicking it's child element using JavaScript

I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.

Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});

you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')

jQuery closest li with a class doesn't work

I have menu (list of categories), level-0 li has class ".cat_cat_h", level-1 .cat_par_c"
HTML:
<ul class="text-links">
<li class="cat_cat_h level-0">Item 1</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_cat_h level-0 active">Item 3</li>
<li class="cat_par_c level-1" style="display: none;">Item 4</li>
<li class="cat_par_c level-1" style="display: none;">Item 5</li>
<li class="cat_par_c level-1" style="display: none;">Item 6</li>
<li class="cat_cat_h level-0">Item 7</li>
<li class="cat_cat_h level-0">Item 8</li>
<li class="cat_cat_h level-0">Item 9</li>
<li class="cat_cat_h level-0">Item 2</li>
<li class="cat_par_c level-1" style="display: none;">Item 7</li>
<li class="cat_par_c level-1" style="display: none;">Item 8</li>
<li class="cat_par_c level-1" style="display: none;">Item 9</li>
</ul>
I would like to show() only level-1 elements that go right after .level-0.active (item 4, item 5, item 6).
UPDATE
Final solution:
$(document).ready(function(){
$( ".level-0.active" ).nextUntil( ".level-0" ).show();
});

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Source
That means the closest() function works in one direction. if you want to go to the parent <ul> and the back to another <li> you have to call the parent() function first, like this:
$(document).ready(function(){
$(".cat_cat_h").parent('ul').find(".cat_par_c").show();
});
edit after your edit:
If you want the previous and the next element of you selected element try this:
$(document).ready(function(){
$( ".level-0.active" ).prev().show();
$( ".level-0.active" ).next().show();
});

To be responsive to Paulchenkiller, I will amplify my answer.
Fluency in any language, spoken (English, Spanish, Italian, French, German, etc) or written (html, css, javascript, c++, pascal, basic, etc) requires the ability to express a certain concept, idea or task in a variety of different ways.
I will attempt to do so with this particular issue in as many ways that this particular noob can think of.
jQuery selectors - this has been nicely expounded on above, and the only comment I might make is the trivial downside in the use of jQuery in terms of its load time (microseconds to milliseconds), and perhaps slightly longer to run than native js (microseconds).
CSS classes - One way to handle this is the use of additional css classes - adding a class, say "li456" that is an "empty" class in the sense that it contains no CSS styling, and is only used to identify a particular line or lines of code. Here is a FIDDLE as an example. It's a bit inefficient in the sense that it can be difficult to follow the code with so many classes attached to a line of html, and needing to look up an additional class in the section or even an attached style sheet.
$(".li456").show();
CSS ids - Even more burdensome, since you can only use an id once on a page, and in this particular case, therefore need three ids. The same applies to ids as to classes, only worse, you have to look up three times the number of ids as classes - since one class can be associated with multiple html lines on a given page. Here is a FIDDLE that shows an example of the use of ids .
$("#li4, #li5, #li6").show();
A variant of CSS is the concept of pseudo classes which are beautifully explained by the experts at CSS-Tricks where they have a nice review of these flexible and powerful methods (http://css-tricks.com/pseudo-class-selectors/). The :lt(x) selects the first x elements of type. Here is the FIDDLE. The :lt() pseudo class is particular to jquery and not a part of the CSS standard.
$(".text-links .cat_par_c:lt(3)").show();
Pure javascript is also a possibility, but in this particular case you would have to add an id to the three elements in question. Here is the FIDDLE.
document.getElementById('li4').style.display='block';
document.getElementById('li5').style.display='block';
document.getElementById('li6').style.display='block';
Pure javascript can be used to select on the class name, and return an array that can be parsed by [n]. This FIDDLE shows an example of a brute-force method. This FIDDLE uses a for loop to go through three elements.
document.getElementsByClassName('cat_par_c')[n].style.display='block';
Then we move to "display" which can be handled with jQuery .show, .css('display', 'block') and javascript .style.display='block'. This FIDDLE demonstrates these methods.
$('.cat_par_c:eq(0)').show();
$('.cat_par_c:eq(1)').css('display', 'block');
document.getElementsByClassName('cat_par_c')[2].style.display='block';
And I'll bet there are many more ways...

jQuery Mobile: unordered list

I have a an unordered list like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="2">Second</li>
</ul>
What I want to do is, when I add another list item:
<li id="3">First</li>
It needs to be prepended to the list item which is just below the first list item in "mylist". ie, just below 'Heading' in this case. So the final list looks like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="3">First</li>
<li id="2">Second</li>
</ul>
Thanks in advance.
NB: What I learned from trying to implement this is, when we append or prepend some content to an element selected with jQuery, it'll get prepended or appended to the content inside the selected element.

You can use after method and :first selector:
$('#mylist li:first').after('<li id="3">First</li>')

http://api.jquery.com/after/
You can use .after, or .insertAfter, for being more precise about placement in the DOM tree.