Question

我有

<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>

我想用JQuery提取它的值。

我试过了：

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

但是这让我获得了两个loc-id的值。我想要的只是我选择的那个（点击）。

有关完整背景信息，请查看此处：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
});

由于

Answer 1

要使var targetID = $(this).find('.loc-id').text();起作用，您必须单击仅有一个.loc-id的上升元素。例如：

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

Answer 2

在您的点击处理程序中，this引用了包含多个<ul>子项的<li>元素。

将点击处理程序更改为代理：

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

现在，在点击处理程序中，this引用了<li>元素，因此搜索应该只生成一个值。

Answer 3

您需要更改选择器。在你的事件处理程序中当$(this)使用ul连接文本时，loc-id会引用text() $('#list li').click(function () { //Change the src of img var targetID = $(this).find('.loc-id').text(); // Get the ID alert('targetID: ' + targetID) }); {/ 1}}。

使用

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

而不是

{{1}}

DEMO

Answer 4

如果您在[{1}}上委托

，则可以使用event.target

演示：http://jsfiddle.net/abhitalks/CxcU8/

#list

查找列表中的类的值

4 个答案: