CODEWITHSUNDEEP
jquery
Magnum
Magnum

Reputation: 1595

jQuery: How to determine which <li> tag was clicked?

I am creating a form with 5 lines of text, and each text I am allowing the user to select if they want the text to be centered, left, or right justified. I have a unnumbered list with list elements x5.

<li><img src="images/justify_left.png" alt="left" /><span>Justify Left</span></li>
<li><img src="images/justify_center.png" alt="center" /><span>Justify Left</span></li>
<li><img src="images/justify_right.png" alt="right" /><span>Justify Left</span></li>

Each of the 5 set of <li> items refers to its respective line.

With jQuery, how would I go about determining which of the 15 <li> items did the user select so that I can correspond the proper justification as a post method?

Upvotes: 7

Views: 21387

Answers (3)

Kobi
Kobi

Reputation: 138007

On the click handler's callback, this refers to the clicked <li>. You may want to add a class just for these list items, or place them in a div with such class, this will allow you to target them and bing the event to them. Also, note that alt is invalid here, you're probably looking for title.

$('li').click(function(){
   var justify = $(this).attr('alt');
   alert(justify);
});

You may want to set an hidden field to that value. You can do that, for example, by adding $('#hiddenJustify').val(justify).

Since you have five groups of these <li>s, you probably want to group them under one element. For example:

<div class="line-justify-group">
   <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
   </ul>
   <input type="hidden" name="line1justify" id="line1justify" class="justify-value" />
</div>

You can then set it using the code:

$(this).closest(".line-justify-group").find(".justify-value").val(justify);

The items will then be posted to the server.

Upvotes: 10

Phonethics
Phonethics

Reputation: 547

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $('#list1 li').bind("click", function(e)
    {
        e = e || window.event;
        var ul = $(this).parent();
        var index = ul.children().index(this);
        alert(index);
    });
});
</script>
</head>
<body>
<ul id="list1">
<li><img src="images/justify_left.png" alt="left" /><span>Justify Left</span></li>
<li><img src="images/justify_center.png" alt="center" /><span>Justify Left</span></li>
<li><img src="images/justify_right.png" alt="right" /><span>Justify Left</span></li>
</ul>
</body>
</html>

Upvotes: 2

Jacob
Jacob

Reputation: 1262

for each li or img or span tag give it a unique id attribute. The same value as the alt text in your example would be good enough

Assuming you have an onclick event on you li or img or span tags you can pass a jquery this object to the function and then get the alt attribute.

onclick="getJustification($(this));"

Then in getJustification:

getJustification(selectedObj)
{
 if(selectedObj.attr('id') == 'left') ... // for each unique id
}

NB: code is written without a reference, off the top of my head. Hope it can push you in the right direction.

Upvotes: 0

Related Questions