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

Question

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?

Answer 1

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.