Finding the value of a class within a list

Question

I have

<ul id="list">
<li data-markerid="0" class="">
<div class="list-label">A</div>
<div class="list-details">
    <div class="list-content">
        <div class="loc-id">2</div>
        <div class="loc-addr">England</div>
        <div class="loc-dist">2 miles</div>
        <div class="loc-addr2">Test</div> 
        <div class="loc-addr2">Bristol</div> 
    </div>
</div>
</li>

<li data-markerid="1" class="">
<div class="list-label">A</div>
<div class="list-details">
    <div class="list-content">
        <div class="loc-id">3</div>
        <div class="loc-addr">England</div>
        <div class="loc-dist">60 miles</div>
        <div class="loc-addr2">Test</div> 
        <div class="loc-addr2">London</div> 
    </div>
</div>
</li>
</ul>

I'm wanting to extract the value of this using JQuery.

I tried:

var targetID = $(this).find('.loc-id').text();

But this gets me values of both loc-id's. I want just the one that I'm selecting (clicking).

For full context, please look here: Parsing data using JQuery

 $('#list').click(function () {
    //Change the src of img
    var targetID = $(this).find('.loc-id').text();  // Get the ID

    // Since array of objects isn't indexed, need to loop to find the correct one
    var foundObject = null;
    for (var key in parsedArray) {
        if (parsedArray.hasOwnProperty(key) && parsedArray[key].id == targetID) {
            foundObject = parsedArray[key];
            break;
        }
    }

    // If the object is found, extract the image and set!
    if (!foundObject)
        return;

    var imageSrc = foundObject.LocationPhoto; // From the object
    $('#location-image').attr('src', imageSrc); // Set the new source
});

Thanks

Answer 1

For var targetID = $(this).find('.loc-id').text(); to work, you must be clicking an element that is an ascendant of only one .loc-id. For example:

$('.list-details').on('click',function(){
    var targetID = $(this).find('.loc-id').text();
});

Answer 2

In your click handler, this references the <ul> element which has multiple <li> children.

Change the click handler to act as a delegate instead:

$('#list').on('click', 'li', function () {

Now, inside the click handler, this references an <li> element so the search should only yield a single value.

Answer 3

You need to change selector. In your event handler. $(this) referes to ul which has multiple loc-id thus when you are using text() its concatenating text.

Use

$('#list li').click(function () {
    //Change the src of img
    var targetID = $(this).find('.loc-id').text(); // Get the ID
    alert('targetID: ' + targetID)
});

instead of

// When we select the item
$('#list').click(function () {
    //Change the src of img
    var targetID = $(this).find('.loc-id').text();  // Get the ID

DEMO

Answer 4

You could use event.target in case you are delegating on #list:

Demo: http://jsfiddle.net/abhitalks/CxcU8/

$("#list").on("click", function(e) {
    var $t = $(e.target);
    if ($t.hasClass('loc-id')) {
        alert($t.text());
    }
});