jQuery选择父级答案

【问题标题】：jQuery select parentjQuery选择父级
【发布时间】：2023-04-04 23:23:01
【问题描述】：

这可能是一个重复的问题，但是我确实搜索了很多不同的答案，以至于我不知道该使用哪个或如何做到这一点。

<?
if(isset($content))
{
    $i = 1;
    foreach($content as $item)
    {
        echo "<li><a href='#' name='" . $item['id'] . "'>" . $item['title'] . "</a></li>";
        $i++;
    }
}
?>

我使用 jQuery 向这些链接添加了一个函数来处理 ajax 调用。我选择的链接如下：

    $("#tips_list ul li a").click(function(e)   { //... }

但是，这没有多大意义，因为现在您必须单击实际文本而不是列表项。所以我想我会重新构建我的 HTML，以便锚标记环绕 li 标记。

    `<a href="#" name=""><li>foo</li></a>`

然后我相应地更改了我的 jQuery 代码：

    $("#tips_list ul a li").click(function(e)   { //... }

但是，现在，当我单击.. 时，它会将列表项标记为$(this)；这意味着我无法真正从锚标记中获取 name 属性。所以！我需要做的是从 parent 锚标记中获取 name 属性。老实说，我不知道最简单的方法是什么。我对 jQuery 没有那么丰富的经验。

非常感谢您帮助我！

【问题讨论】：

$(this).parent() 不起作用？您还应该考虑更新您的 css 以更好地处理您的 LI。
不要在li 周围加上a，这是无效的。

标签： jquery jquery-selectors selector parent-child parent

【解决方案1】：

保留旧标记。后面那个比较牛逼，用下面的脚本。

$("#tips_list ul li").click(function(e)   {
    var name = $(this).children("a").attr("name");
    alert(name);
}

【讨论】：

【解决方案2】：

要获取元素的父元素，您只需要使用 $(this).parent() 所以我会这样做： $(this).parent('a').attr('name');

【讨论】：

【解决方案3】：

回到原来的方法，在你的CSS中设置#tips_list ul li a {display:block}怎么样？那应该使 a 扩展并占据整个 li，使整个 li 看起来可点击。您的原始代码应该可以正常工作。

【讨论】：

好吧，显然我对自己太苛刻了，还有一种更简单的非 jQ 方式。非常感谢！