Develop Reference

How to generate dynamic id using jQuery?

I want to add progressive id to a series of elements on an unordered HTML list. I used the jQuery .each() method to get each <li> of the List and append a <span> inside each <li>. Then I added the ID attribute with index of each() as number.
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(".arr").attr("id", "id_" + i);
});
Fiddle Demo
But I get id_3 for all elements. Why? What did I do wrong?
Thanks for any help!

It is because you are applying it to .arr globally, so overriding it every time.
You need to be more specific with adding it, by finding the .arr in you current li.
Change your code to be:
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(this).find(".arr").attr("id", "id_" + i);
});

As has been pointed out, $(".arr") targets every element with the arr class, so on the fourth iteration you update all such elements to the id_3 id.
You can limit the selection with $(".arr", this) or $(this).find(".arr"), but it would be easier to just turn the append around:
$('#menu li ul li').each(function(i, e){
$('<span class="arr"></span>')
.attr("id", "id_" + i)
.appendTo(this);
});
That is, create the element first, set its id, then use .appendTo() instead of .append().
Or rather than calling .attr() you can pass the desired attributes directly to the $() function when you create your span:
$('#menu li ul li').each(function(i, e){
$('<span></span>', {
"class": "arr",
"id": "id_" + i
}).appendTo(this);
});

You are targeting a class when assigning the attribute. Every element you create is created with the same class so all items get assigned the same attribute. This code saves the newly created element to a variable called elem and then sets the attribute ID of that newly created element.
var elem = $(this).append('<span class="arr"></span>');
elem.attr("id", "id_" + i);

You need to scope your $(".arr").attr("id", "id_" + i); selector. Its currently pulling all the <span> tags each time. I'm guessing you have 4 total at this point, which is why they are all getting set to "id_3".
Added in $(this) to your selector.
$('#menu li ul li').each(function(i, e){
$(this).append('<span class="arr"></span>');
$(".arr", this).attr("id", "id_" + i);
});
Modified Fiddle: http://jsfiddle.net/NZgyD/2/

you can do it this way
$('#menu li ul li').each(function(i, e){
$(this).append('<span id="id_' + i + '" class="arr"></span>');
});

because $(".arr") is selector for multiple items

Hide div if the ul is empty

Here is my html,
<div id="personaldetails">
<ul>
<li class="clear"></li>
</ul>
<ul>
<li class="clear"></li>
</ul>
</div>
I want to hide div personaldetails when all the ul inside in div is empty.
If the ul is having element <li class="clear"></li> then the ul is considered as to be empty.
How to do this using Jquery ?

You can try this:
$('#personaldetails').find('ul').each(function(){
var txt = $("li", this).text();
if(txt.length <= 0){
$(this).hide();
}
});
if(!$('#personaldetails').find('ul:visible').length){
$('#personaldetails').hide();
}
Updated Fiddle
And to me you should hide all ul, if no ul are visible then you can hide the #personaldetails div.

Even one of answer is already accepted, I think it can be simple as:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
:)

Take a look at that code:
function foo(){
var all_li_clear = true;
$("#personaldetails > ul > li").each(function(){
if(!$(this).hasClass("clear")){
all_li_clear = false;
break; // No need to continue now
}
});
if(all_li_clear){
$("#personaldetails").hide();
}
}
You can see a fiddle example there, just comment and discomment foo(); line.

Javascript solution:
This will only hide the div if all li have clear class
$(function() {
emptyLi = $('#personaldetails ul li').filter(function(){
/*if($(this).hasClass('clear')){
return true;
}else{
return false;
}*/
return $(this).hasClass('clear');
}).length;
if($('#personaldetails ul li').length == emptyLi){
$('#personaldetails').css('display','none');
}
});
CSS:
This will hide the li with class clear, so if you not fixed height of ul or li and don't have padding , margin given to ul,li your div personaldetails will get hidden automatically when all li element have class clear
#personaldetails ul li.clear{
display:none;
}

-UPDATED-
You can use following code if you are deciding empty class based on clear class.
if($("#personaldetails ul li:not(.clear)").length == 0) {
$("#personaldetails").hide();
}
Or if you are looking for the empty div then you can just use the shortest code given by #Samiul Amin Shanto Like:
if($.trim($("#personaldetails").text()) == '') {
$("#personaldetails").hide();
}
Explanations
Method1:
$("#personaldetails ul li:not(.clear)")
This code find all li without the clear class. Then if no such li found, just hide the div. Fiddle
Method2:
$("#personaldetails").text() this code return innerHTML text striping all html tags. So no meter what the div contain ul, li or anything else, this will return the plain text content of the div, then striping any white space we can determine if the div is empty. If your intention is to hide the empty div not hiding the div which contain empty Ul this should be your choice.

This asumes that if you have the same amount of li's with the class clear, as there are ul's, they're all empty
var $wrapper = $('#personaldetails');
if( $wrapper.find('ul').length=== $wrapper.find('li.clear').length){
$wrapper .hide();
}
Everybody's fiddling examples :)

$(function($) {
$cnt = 0;
$('.personalDetails ul li').each(function() {
if($(this).hasClass('clear')) $cnt++;
});
if($('.personalDetails ul li').length == $cnt) $('.personalDetails').hide();
});

$("ul li:empty").closest('div#personaldetails').hide();
Sample Code

#personaldetails ul li.clear{
visibility:hidden;
}

jQuery selecting top level element text

I have a menu that has the section Store this has a submenu of categories Printers Keyboards and under these categories they have their own sub categories.
What I am trying to do is select the top level categories that are Printers Keyboards just using jQuery into an Array.
When I use the following it prints out ["Printers", "Color", "Black/White", "Dual", "Keyboards", "Wired", "Wireless", "Touchscreen"] This is more than I need for now, could someone help me
Check out my jsFiddle
jQuery
var optionTexts = [];
$('.main-menu ul li a:contains("Store")').parent().find('.sub-menu > li a').each(function(){
optionTexts.push($(this).text());
});
console.log(optionTexts);

EDIT I looked at your fiddle a bit more closeley and changed the way the right "a" tag is found:
'.sub-menu > li > ul > li > a' will do it (I checked it in your jsfiddle):
$('.main-menu ul li a:contains("Store")').parent().find('.sub-menu > li > ul > li > a').each(function(){
optionTexts.push($(this).text());
});
The way you did it, every a underneath the "ul.sub-menu" is selected - also those that are nested in children and grandchildren of "ul.sub-menu".

Hope you are looking for something like this
var optionTexts = [];
$('.main-menu ul li a:contains("Store")').parent().find('.sub-menu').parent('li').each(function(){
optionTexts.push($(this).children('a').text());
});
console.log(optionTexts);

I Edit your code like this, its worked :
$(function () {
$(".check").on('click', function () {
var optionTexts = [];
$('.list > ul > li > a').each(function () {
optionTexts.push($(this).text());
});
c(optionTexts);
});
});
output : Printers, Keyboards
Check it FIDDLE : http://jsfiddle.net/mehmetakifalp/Mkv9q/16/

target single element when it is not possible to use $(this)

function modalClosed(){
$("div#tab" + tabId).find('ul')
.prepend("<li>item</li>")
.hide()
.fadeIn('slow');
}
I want the list (<li>) to be prepended and have fade in effect one by one, unfortunately I have no way of using $(this), the above code doesn't work well, it apply effect on all of the <li>.

That's because .prepend() returns the ul element not the appended li element, so you are hiding/showing the ul element. You can reverse the logic using prependTo() method, now .hide() and .fadeIn() are applied to the appended element not the ul element.
$("<li>item</li>").hide()
.prependTo("#tab"+tabId+" ul")
.fadeIn('slow');
http://jsfiddle.net/5yj7v/

function modalClosed(num) {
$("div#tab" + tabId).find('ul')
.prepend("<li>item</li>")
.hide()
.fadeIn('slow', function() {
// callback function, called when fadeIn has finished
if(num > 1) {
modalClosed(num - 1);
}
});
}

From what I understand You want fade in effect one by one on all li items. If that is correct then try the following:
var time=1000;
$("div#tab"+tabId+" ul").prepend("<li>item</li>");
$("div#tab"+tabId+" ul li").each(function() {
$(this).hide();
$(this).fadeIn(time);
time+= 800;
});
http://jsfiddle.net/PV4dC/5/

jQuery indexOf function?

I'm trying to get a location of an element in a jQuery set.
Here's what I tried so far.
I want to be able to do something like this:
$('ul').find('a').indexOf('.active');
And get the location of the .active in the set of a's.
Is there something like an indexOf() function for jQuery? The index() method doesn't work

if you pass a jQuery set ($searchFor) as an argument to the index method of another jQuery set ($searchIn) i.e.
$searchIn.index($searchFor)
it will return the index of $searchFor in the set $searchIn
In your example:
$('ul a').index($('ul a.active'));
​

You just need to give the index function a jQuery object:
var elements = $('ul a');
var index = elements.index(elements.filter('.active')); // 2
alert(index);
Live DEMO
​
There is no such function out of the box, it can be done easily like this:
var index = -1;
$('ul a').each(function(i){
if ($(this).hasClass('active')){
index = i;
return false;
}
});
alert(index);
Live DEMO

Your logic is sound, you're just grabbing the wrong element: http://jsfiddle.net/xz9dW/19/
var index = $('ul a.active').closest('li').index();
The a link has no index() value since it has no siblings; you have to grab the li

You can do this by just asking for it in the selector:
$('ul a.active')
What do you mean by getting the location however? Do you mean position? or URL?
If you would like to know which one you click on lets say.. You would use $(this) inside your event function. Here is an example which returns the current position of the element you click on, if there are multiple with the .active class:
To get the position:
$('ul a.active').click(function(){
alert( $(this).position() );
})
To get the URL location:
$('ul a.active').click(function(){
alert( $(this).attr('href') );
})