按钮上的jQuery单击查找标签<li>

Question

我有以下代码：

<ul data-role='listview' id='the-listview' data-inset='true' data-corners='false'>
    <li data-tag="<?php echo $id . "|" . "age"; ?>">
        <img src='images/photo.png' class='main-photo'/>
        <label class='name'><?php echo $name; ?></label>
        <p class='country'><?php echo $country; ?></p>
        <img src='images/edit.png' id='edit-info' style='cursor: pointer'/>
    </li>
</ul>

我想点击图片“edit-info”，检索<li data-tag>值。 尝试失败：

$("#edit-info").on("click", function(){
    alert($(this).find('li').attr('data-tag'));
});

它检索'undefined'。

Answer 1

您不能在此上下文中使用.find() 。 它将寻找descendants 。 .Closest()将是正确的选择，因为它将向上移动DOM树并根据selector选择元素。

尝试，

$("#edit-info").on("click", function(){
    alert($(this).closest('li').data('tag'));
});

Answer 2

find()旨在查找子元素。 在这种情况下， li是父元素，因此使用closest()代替：

alert($(this).closest('li').attr('data-tag'));

Answer 3

那是因为你没有使用正确的属性。

如果你想使用find()请先请

1. 转到父元素

2. 然后找到孩子！

像这样：

$(this).parent().attr('data-tag')

这会奏效！

此代码将转到父元素; 因为图像在li所在的元素中。因此，find只能找到子元素。 因此，使用.parent()转到父元素，然后使用find()返回其子元素。