How to append the img alt to an li

Question

Hey guys, me again, I know I asked something similar a little while ago, but the function that i need for this it is slightly different, this time I have an ul element with img tags embedded inside a tags. What I need is when the image is clicked to populate an li element, but is the next or last image is clicked I need the same li element populated with the update content. Please find the html below. Thanks in advance.

<div class="filter">
    <div class="heading" id="activityLevel">
        <p><a href="#">Activity Level</a></p>
        <a href="#" target="_self">modify</a>                  
    </div>
    <div class="add-filters" id="addActivityLevel">
        <div class="inner">
            <a href="#" class="btn-close"></a>
            <h4 class="title-filtery">Filtery By:</h4>
            <ul class="activity-level">
                <li><a href="#"><img src="../images/shore-excursions/btn-activity-level-easy.gif" alt="Activity Level Easy" /></a></li>
                <li><a href="#"><img src="../images/shore-excursions/btn-activity-level-moderal.gif" alt="Activity Level  Moderate" /></a></li>
                <li class="last"><a href="#"><img src="../images/shore-excursions/btn-activity-level-extreme.gif" alt="Activity Level Extreme" /></a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. iaculis in magna. In ut dolor a lacus adipiscing molestie.</p>
            <div class="btn-holder clearfix">
                <input type="button" class="btn-cancel" value="" />
                <input type="button" class="btn-update" value="" />
            </div>
        </div>
    </div><!-- filters -->
    <div class="hidden-filters" id="hiddenActivityLevel">
        <p>Filtering by:</p>
        <ul></ul>
    </div>
</div>

Answer 1

$(document).ready(
function(){
  $('img').click(
    function(){
        if ($('#hiddenActivityLevel ul li:first').length) {
          $('#hiddenActivityLevel ul li:first').text($(this).attr('alt'));
        }
        else {
          $('<li />').appendTo('#hiddenActivityLevel ul').text($(this).attr('alt'));
        }
        return false;
    }
  )
}
);

A couple of pointers:

This will react to a click on every image element, the return false is there specifically for those images inside of a tags; but you'd do well to specify, by class or parentage ($('ul li a img') for example) to narrow the range of affected elements.

In the above, also, the selector $('hiddenActivityLevel ul li:first') is used to select only one li, though you could use eq() to achieve the same (for example: $('hiddenActivityLevel ul li').eq(3) will select the fourth li, JS arrays are zero-based, remember).

I would, though, strongly advise you to place an id on the specific li you want to populate and have it present in the DOM on-load, rather than creating it on the fly.

I'm not quite sure what you mean by:

but is the next or last image is clicked I need the same li element populated with the update content.

But I've taken it to mean 'I want the same li to be updated with the alt text of the clicked-image regardless of which image is clicked.'