CODEWITHSUNDEEP
jquerytwitter-bootstrapclick
Omranic
Omranic

Reputation: 1432

Get ID of clicked list item

http://jsfiddle.net/Ht8eP/3/

In the previous example I catch every clicked list item explicitly by it's ID, which isn't practical & efficient specially with too many items. What I want to achieve is to get it dynamically without hard coding all list items.

$(function() {
    $("#a1").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-1";
        document.getElementById("result").innerHTML = process("a1");
    });

    $("#a2").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-2";
        document.getElementById("result").innerHTML = process("a2");
    });

    $("#a3").click(function()
    {
        document.getElementById("dropdown").innerHTML = "A-3";
        document.getElementById("result").innerHTML = process("a3");
    });
});

function process(param)
{
    // Some processing!
    return param;
}

Upvotes: 2

Views: 7029

Answers (5)

penacho123
penacho123

Reputation: 21

code optimization

$(function() {

    $("li","ul.dropdown-menu").click(function(){
        $("#dropdown").html($(this).html()) ;
        $("#result").html(process($(this).attr('id')));
    });
});

function process(param){
    // Some Processing!
    return(param);
}

Upvotes: 0

pranag
pranag

Reputation: 5622

Add your own attribute for all the elements that you need to process and write a generic jquery select expression to select all these elements based on your attribute. something like this....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(function () {
            $("[process]").click(function () {
                $("#dropdown").html($(this).attr("process"));
                $("#result").html($(this).attr("process"));
            });            
        });

        function process(param) {
            // Some processing!
            return param;
        }
    </script>
</head>
<body>
<a process="A-1" id="a1" href="#">A-1</a>
<a process="A-2" id="a2" href="#">A-2</a>
</body>
</html>

Upvotes: 0

Nope
Nope

Reputation: 22339

To use your existing code, changing it as little as possible you can bind to the ul.dropdown-menu li instead and get the HTML from the a inside it and use the current (this) li's id value, similar to this:

$("ul.dropdown-menu li").click(function() {
    var $link = $(this);
    document.getElementById("dropdown").innerHTML = $("a", $link).html();
    document.getElementById("result").innerHTML = process(this.id);
});

DEMO - Replacing multiple with single click event

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191779

You can use the same class on all of the <li> and then just bind to that class. As for specifics, I suggest either using the id or data-id:

$(".a").click(function()
{
    document.getElementById("dropdown").innerHTML = "A-" + $(this).data('id');;
    document.getElementById("result")
                .innerHTML = process("a" + $(this).data('id'));
});

http://jsfiddle.net/ExplosionPIlls/Ht8eP/6/

Upvotes: 0

Blender
Blender

Reputation: 298364

Select the elements based on their location:

$(function () {
    $(".dropdown-menu li").click(function () {
        var text = $(this).text();

        $("#dropdown").text(text);
        $("#result").text(process(text));
    });
});

So instead of looking for #a1, you look for the <li> elements inside of <ul class="dropdown-menu">.

Demo: http://jsfiddle.net/Ht8eP/5/

Upvotes: 1

Related Questions