We Keep Coding

How to find only first entry in dom

I have some dom like
.....
<ul>*
<li>
<ul>
Sone html here
</ul>
</li>
</ul>
.....
<ul>*
<li>
<ul>
<li>
<ul>
Some html here
</ul>
</li>
</ul>
</li>
</ul>
......
How can I find the first <ul> elements (marked by *) using jQuery?
I used something like
$('body ul:first-child')
but this returns only one element

You need to use immediate child selector to target elements that are immediate child of their parent:
$('body > ul')

I don't know why few person recomended to delete answer bnu right answer is
$('ul:not(ul ul)')
we need to exclude ul included in ul in this case we get ul only on top level (marked by *)

Finding what child the nested ul is based on link clicked inside it

I have a setup like this
<ul>
<li> link
<ul>
<li> link
<ul> ... etc
</ul>
</li>
</ul>
So several nested uls, I need to figure out some way to find what level of nesting the ul has based on link that was clicked inside it, is it a top (1st) middle (2nd) etc.. one

If you have clicked element <li> (in your event handler) you can just count all parent <ul> elements
element.parents('ul').length

You can use
$("a").click(function(){
alert($(this).parents("ul").length);
});
Fiddle

how to insert every two li s in ul using javascript

I am developing an html5 application using backbone.js. The format of html includes list elements. The labels of li elements come from web service.I am populating li elements dynamically .
I am taking all the labels in a collection and sending to Template.
Now I want to insert every 2 li elements in ul elements dynamically.How can I achieve that?
My html is looking like
<div class="auto_data">
<li>
<label style="color:white">Name<sup>*</sup></label><input type="text">
</li>
<li>
<label style="color:white">Age<sup>*</sup></label><input type="text">
</li>
<li><label style="color:white">Gender<sup>*</sup></label><input type="text">
</li>
<li>
<label style="color:white">salutation<sup>*</sup></label><input type="text">
</li>
</div>
Now i want to insert ul element for every two li elements
<ul>
<li>....</li>
<li>....</li>
</ul>
Now Iam writing in my view
like
_.each(this.questionReferenceCollection.models,function(model){
uiControl=model.get('UIControlType');
if(i==0){
$('.auto_data',self.el).append('<ul>');
}
i++;
$('.auto_data',self.el).append(new questions({
model:model,
controlType:uiControl
}).render().el);/* this will render li template */
if(i==2){
$('.auto_data',self.el).append('</ul>');
i=0;
}
});
But because of asynchronous call,
it results in
<ul></ul>
<li>...</li>
<li>...</li>
<ul></ul>
<li>...</li>
<li>...</li>
<li>...</li>
I want
<ul>
<li>..</li>
<li>..</li>
</ul>
Please suggest me.

You can loop over the collection in your template for example. In that loop you can use the modulo operator (%) to determine whether or not the current index is dividable by 2. If so, you add a closing ul and an opening ul at that point.

Edit: Updated with a slightly more simple approach.
This is a little trickier than it first looks, but by using some creative selectors, the code to do it isn't too bad in the end:
var $autoDataDiv = $(".auto_data");
while ($autoDataDiv.children("li").length > 0) {
var $newUL = $("<ul />");
$newUL.append($autoDataDiv.children("li:first"));
if ($autoDataDiv.children("li:first")) {
$newUL.append($autoDataDiv.children("li:first"));
}
$autoDataDiv.append($newUL);
}
Basically, what it does is selects the <li> elements that are immediate children of the "auto_data" <div> and then moves them in pairs into newly created <ul> elements and then appends those elements to the original parent <div>.
The "trickiest" part of the code is the fact that you use $autoDataDiv.children("li:first") twice when moving the <li>'s to the new <ul>. The reason why that works is that, when an <li> is moved into the new <ul>, it is no longer an immediate child of the "auto_data" <div> and, therefore, is no longer returned by the selector. So, when the first <li> that gets moved over to the <ul>, it disappears from the selection group and the next <li> moves into it's place as the one returned by $autoDataDiv.children("li:first").
Anyway, this should work for you . . . let me know if you have any questions.

how to find element in div which has Class and is NOT this in jquery

I'm trying to find an element in div called wrapper which has a class of active but is not the one I've just clicked.
Here is my code which works if I click on the .title class:
$(".title").click(function(){
if ($("#wrapper ul li").hasClass("active")) {
alert("found one!");
}
});
But i have no idea how to check if its not the one I've clicked. I tried adding .not(this) and .not($(this)) to my if statement to no avail.
I should add i plan to removeClass of any that are not the current selected div.
I'm sure I have something wrong somewhere.
for reference heres the HTML:
<div id="wrapper">
<ul>
<div class="title">Title</div>
<li class="active">Active Clicked List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
</div>
Any Suggestions on how I can do this?

Please note that your html is invalid, DIV can not be a child of UL. Selector is not correct either using $('.title') since it is not the class that you are applying active to
hasClass() returns a boolean, so is not chainable
Not exactly sure what you are trying to do but based on code shown you need to use the not() filter before hasClass():
if ($("#wrapper ul li").not(this).hasClass("active")) {
OR
if ($("#wrapper ul li.active").not(this).length) {
If all it is for is to remove the class, simply remove the active class from all before adding to the current one and you don't need to test for it first

Using not works fine to exclude an element:
$('#wrapper li').click(function(){
$('#wrapper li').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/97DXe/
If you comment out the addClass, you will see that clicking the already active element doesn't remove the class from it.
If you are going to set the active class on the clicked element, it doesn't do much harm to simply remove the class from all the elements first, so then you wouldn't need the not.

Onclick problems in list elements

Okey so I got a List that's beeing created depending on the information from a database. the end result looks something like this:
<ul id="menu">
<li onclick="testFunction(1, "text")">Title1</li>
<li onclick="testFunction(2, "text")">Title2
<ul class="sub">
<li onclick="testFunction(3, "text")">Title3</li>
</ul>
</li>
<li onclick="testFunction(4, "text")">Title4</li>
</ul>
Now, I want to send the id and the text to the function "testFunction". This works great with the primaty li elements, but when I click a li element from the "sub" class, the function is first run on the pressed li element and then on the li element above. So in this case, if i press Title3, the function will first be ran with id 3 and then with id 2 witch is the parent element. I am thinking it's somehow accessing the whole li tree somehow but can't really understand why. any thoughts?