jQuery在h标签内找到元素。使用哪个DOM选择器？

Question

我在h标签中有一个图标：

<h4 class="ipro_toggle"><i class="fa fa-chevron-down fa-rotate-270 pull-left toggle_icon"></i>Click Me</h4>

我在点击h4时尝试切换班级fa-rotate-270。在一个页面上会有多个这样的元素。

    $("h4.ipro_toggle").click(function(){
    $(this).next(".toggle_icon").toggleClass("fa-rotate-270 norotate");
});

这找不到图标。我应该使用什么DOM选择器？

Answer 1

有几种方法：

$(this).children('.toggle_icon').toggleClass('fa-rotate-270 norotate');

OR

$(this).find('.toggle_icon').toggleClass('fa-rotate-270 norotate');

OR

$('.toggle_icon', this).toggleClass('fa-rotate-270 norotate');

您使用的方法（next）在此处无效，因为.toggle_icon不是所点击的<h4>元素的 next 兄弟，而是其后代。

Answer 2

使用.find()，而不是.next()：

$("h4.ipro_toggle").click(function(){
    $(this).find(".toggle_icon").toggleClass("fa-rotate-270 norotate");
});

Answer 3

您必须由find替换下一个。为了获得H标签的后代。

$(this).find(".toggle_icon").toggleClass("fa-rotate-270 norotate");