javascript - 使用 jQuery 从子元素中选择父元素

Question

我的代码：http ://codepen.io/anon/pen/ABrDe

当我单击“li”中的“a”元素时，我希望它获得“活动”类和向右的箭头（带有我写给 JS 部分的“跨度”）。“活动”部分没问题，但我对箭头部分感到困惑。我想我应该选择'li'，而不是'a'。但我只给“a”一个“活动”类。如何选择“作为'a'的父级的'li'，该'a'具有'active'类”？

Answer 1

jQuery 选择器：

$("a").parent("li").hasClass("active");

Answer 2

使用parent方法。

$("#resp-list a").click(function () {
     var _this=$(this);
     var parentItem=_this.parent();

    //do whatever you want with the parent.
});

此外，您可能需要使用append方法将跨度添加到 li。

Answer 3

您使用以下方法检索父对象：

var parent = $(this).parent();

因此，在您的情况下，父 jQuery 对象将使用以下 DOM：

<li>
    <a href="#">Test ...</a>
</li>

此外，在一个范围内将 jQuery 包裹在一个对象周围总是一个好主意。因此，当您多次使用选择器时，请将其保存到变量中。

var $this = $(this);
var $parent = $this.parent();

Answer 4

看到这个：小提琴

 $("#resp-list a").click(function () {
     $(this).parent().siblings().find('a').removeClass("active");
     $(this).addClass("active"); 
     $(this).parent().add('<span class="fr arrow-right"></span>');
 });

Answer 5

我编辑了你的小提琴，使其表现得如你所愿。

http://cdpn.io/ABrDe

    $("#resp-list > li").on('click', 'a', function () {
        $("#resp-list > li > a").removeClass('active');
        $(this).addClass("active"); 
        $(this).parent().prepend('<span class="fr arrow-right"></span>');
   });

Answer 6

看看这个...

http://jsfiddle.net/qdZxQ/

$(document).ready(function(){ $("#resp-list a").click(function () {

    $("#resp-list a").removeClass("active");
    $(this).addClass("active"); 
    if($(this).hasClass("active")){
        $("#resp-list a span").remove();
        $(this).append('<span class="fr arrow-right"></span>');
    }
 });

});

希望这是你所期望的。