How to call and run same function simultaneously from different `<LI>`

How to call and run same function simultaneously from different <LI> using javascript or jQuery.

I want to use same function with different parameters. I want to create like Browser tabs.The开发者_StackOverflow multiple tabs are loading simultaneously.

(Sorry, I missed the jquery tag somehow originally.)

Using jQuery:

HTML:

<ul id="mylist">
    <li>One</li>
    <li>Two</li>
</ul>

JavaScript using jQuery:

$("#mylist > li").click(function() {
    // Here, `this` refers to the raw DOM element.
    // If you want to know which one it is by index,
    // you can use $(this).index() (they start at 0).
    // Or you can store information on the element
    // using data-* attributes, and use
    // $(this).data(...)
});

Live example

Original answer from when I'd missed the jquery tag (doh!):

There's the DOM0 way:

<li onclick="doSomething(1);">One</li>
<li onclick="doSomething(2);">Two</li>

Or there's the unobtrusive DOM0 way:

HTML:

<ul id="mylist">
    <li>One</li>
    <li>Two</li>
</ul>

JavaScript:

var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
    if (li.nodeName.toUpperCase() === "LI") {
        li.onclick = makeCallback(++index);
    }
}
function makeCallback(val) {
    return function() {
        doSomething(val);
    }
}

Or the DOM2 way:

(Same HTML.)

JavaScript:

var ul = document.getElementById("mylist");
var li;
var index;
for (li = ul.firstChild; li; li = li.nextSibling) {
    if (li.nodeName.toUpperCase() === "LI") {
        hookEvent(li, "click", makeCallback(++index));
    }
}
function makeCallback(val) {
    return function() {
        doSomething(val);
    }
}
function hookEvent(element, eventName, handler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }

Try to use $.each:

$(...).each(function(index, Element) {
    ...
});

See: http://api.jquery.com/each/ For example:

$(...).each(function(index, Element) {
    var target = $(this);
    target.click(function() {
        // when user click...
    });
    // something other logic...
});

    $('li').click(function(){ var target = $(this);// get your target element
});

And here is the jquery way:

$("li").click(function(){
  doSomething($(this).data('someValue'));
}); 

With the HTML holding the parameters.

<li data-someValue="one">One</li>
<li data-someValue="two">Two</li>

Add a rel attribute to the <li> element, then call the function on the <li>

$('li.your-class').bind('event_type', function(){
    var ref = $(this).attr('rel');
    // call your function
    myFunction(ref);
}

There are quite a few outof the box solutions for this, such as jquery ui. If you wanted to do it manually you could do it fairly easily.

jQuery tabs: http://jqueryui.com/demos/tabs/

Have your content areas named:

#main_0
#main_1
...

Then add a selector to LI Something like:

var CurrentTabIndex = null;
$("li").live('click', function(e) {
  var TabIndex = $(this).index;
  var divName = "#main_" + TabIndex;


    $.ajax({
    url: "OpenTab.php",
    data: { TabId: TabIndex },      
    success: function (data) {            
        $(divName).html(data);
        $(divName).show();
        if(CurrentTabIndex != null)
        {
           $("#main_" + CurrentTabIndex).hide();
        }
        CurrentTabIndex = TabIndex;
    }
   });
  });