We Keep Coding

Select elements from first level

I have this ul li list:
<ul>
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li>
<ul>
<li><div>Text</div>A1</li>
<li><div>Text</div>B1</li>
<li><div>Text</div>C1</li>
<li><div>Text</div>D1</li>
</ul>
</li>
<li><div>Text</div>E</li>
</ul>
I need to choose all "li" element from the first level.
In this example it will be:
<li><div>Text</div>A</li>
<li><div>Text</div>B</li>
<li><div>Text</div>C</li>
<li><div>Text</div>E</li>
Trying to use:
$('ul').children()
I get all "li" elements from the first level and second level.
Thank you very much.

Select li of ul:first which doesnot has a ul element as child.
$('ul:first').children('li:not(:has(ul))');
Fiddle

You can use following code which will search for 1st ul and then all li's:
$('ul:first>li')

You can add a class to the first ul and then call .children()

try
$('ul>li').css(//your doing//);
This will select the direct childs of the all ul tags in your code.
If you want to acess specific ul, try givig it a class or id.

Give the external ul a class:
<ul class="my_ul">
....
</ul>
and in jquery you an get them like:
$('.my_ul').children()
EDIT: my first code was getting al children.

You could change your selector to
$("'whatever element is above first level ul element' > ul > li")

How to get parent element?

I have this part of HTML:
<div id="menu">
<ul>
<li>Startseite</li>
<li class="active">Brillengläser</li>
<li>Komplettbrille</li>
<li>Sportbrillen</li>
<li>Marketing</li>
<li>Statistik</li>
</ul>
</div>
I want to remove class="active" parameter and set it in li tag where I have href="/pacmodule/completeglass" atribute.
First part I successfully done with jquery:
$("#menu").find("ul:first").find(".active").removeClass("active");
But I have problems with second part. This select just a tag:
$('a[href="/pacmodule/completeglass"]').parent().html();
And this all ul tag:
$('a[href="/pacmodule/completeglass"]').parent().parent().html();
How can I set class="active" attribute in li tag where href="/pacmodule/completeglass"
Thank you for help.

You do not need the html() calls. They just return the innerHTML as a string. You probably expected that would return the outerHTML (for the outerHTML use something like ...parent()[0].outerHTML)
Try this:
$('a[href="/pacmodule/completeglass"]').closest('li').addClass('active');
It will find the anchor based on the href = "/pacmodule/completeglass", then find the closest ancestor that is an LI, then add the class active to it.
closest is the most useful way to find an ancestor of a specific type. It is better than using parent() as closest copes with the HTML structure changing.
Note: If you explain the overall aim, there may be better ways to do this than searching for the link href :)
Update
You do not want to remove the previous selection with this as it is too specific:
$("#menu").find("ul:first").find(".active").removeClass("active");
try this instead:
$("#menu li.active").removeClass("active");

.closest()
$("li").removeClass("active").find($('a[href="/pacmodule/completeglass"]')).closest('li').addClass('active');
DEMO

Easily do this (into your js document):
$("#menu li").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");

$("#menu").find("ul:first").find(".active").removeClass("active");
This can be made more effective writing it as:
$("#menu").find("li.active").removeClass("active");
Then the DOM dont need to search for any ul, instead it goes directly to the class .active

why don't you try this :
$("#menu").find("ul:first").find(".active").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");
you might wanna check this fiddle

Simple mind-blowing thing; CSS selectors vs jQuery selectors

CSS selector :not() is not working and jQuery :not does.
Consider this structure:
<div class="main">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div>
<div class="doc-view">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
And this simple CSS:
li:not(.doc-view li) {
color:green;
}
And a little of jQuery here:
$('li:not(.doc-view li)').css('color','red');
As you can see, selectors are the same. But if you play with jsFiddle, you will see, that are not the same. jQuery selector targets elements, CSS does not.
http://jsfiddle.net/LL429/3/
EDIT:
The question is:
How to target all <li>s on the page, except those which are in .doc-view container?

This is because they mean different things. Let's start with the CSS.
li:not(.doc-view li)
This means select all list items, but not those that have descendants that have the class doc-view with a list item descendant. Your code has none of those, plus only simple selectors are allow to be used with :not(), so the selector is invalid anyway.
Now for the jQuery.
$('li:not(.doc-view li)')
This says select all list items, but do not include in that collection any elements with the class doc-view with a list item descendant. This works because it first select all list items, and then removes the matching group of elements that fit the :not(.doc-view li) selector.

CSS selectors != jQuery selectors.
jQuery uses Sizzle CSS selector engine.
Try:
ul > li {
color:green;
}
DEMO

Since .doc-view is on the div, you need to use the negation on the div and then access the li.
So the pure CSS solution is:
ul > li {
color: red;
}
div:not(.doc-view) > ul > li {
color:green;
}
See working jsFiddle demo

jQuery selector and cloning in a smart fashion

I am having trouble finding the way to solve this issue. I have this ul-menu output by Wordpress:
<ul class="menu">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
But I want the end result to be like this - cloning and appending the anchor and put a clone below:
<ul class="menu">
<li>
Page 1
Page 1
</li>
<li>
Page 2
Page 2
</li>
</ul>
I have used jQuery - but I am not having any luck at all for 2 hours of trial and error. This is as close as I can get. But it is wrong.
/*jQuery*/
$('.menu li a:first-child').eq(0).clone().insertAfter('.menu li a:first-child');
Fiddle here: http://jsfiddle.net/67jXz/1/

You're not supposed to .eq(0); that will limit it to the first a element that's matched, so that will be cloned and inserted after every subsequent a, resulting in copies of "Page 1".
Instead, you need to perform the cloning and inserting for each individual element by iterating with .each(), like so:
$('.menu li a:first-child').each(function() {
$(this).clone().insertAfter(this);
});
Note that the .insertAfter(this) part refers to inserting the cloned element after the original element that was matched by the .menu li a:first-child selector; the same this in $(this) that references the matched element.
Updated fiddle

Try this code:
$(function(){
$('.menu li a:first-child').each(function(k,v){
$(v).clone().insertAfter(v);
});
});
jsfiddle

Finding an element's location in a jQuery object

I need to find a specific elements position in a jQuery collection.
For example in a collection of a elements I need to know the numeric position of the element with the "active" class.
<ul>
<li></li>
<li><a class="active" href="#"></a></li>
<li></li>
</ul>
I assumed using index would be the way to go but the following returns 0 no matter what the location of active.
$('ul li a').index('.active');
Is there any simple way to do what this?

Try this:
$('ul li a.active').index();
Note that even by using correct syntax this code always returns 0 as there is only one anchor link within li tags, you can find the index of parent li element instead.
$('ul li:has(a.active)').index();

Try:
$('ul li a').each(function(i) {
if ($(this).hasClass('active')) console.log(i);
});​
jsFiddle example
Or
console.log ($('ul li:has(a.active)').index() );​

This should do :
$('ul li a').index($('ul li a.active'));
If you pass a DOM element or jQuery object to index it returns the position of that element/object in the original collection.
jsfiddle for the sake of completeness

How about:
$('li').index($('.active').parent())

$("ul li a").each(function(i){
if($(this).hasClass("active")){
alert(i)
}
});​
i hope it will solve your problem