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()，请先

转到父元素
然后找到孩子！

像这样：

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

这样可行！

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

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

3 个答案: