jquery - 如果父元素包含元素，则向元素添加类

Question

如果父元素（class =“container”）在其中包含一个元素（class =“sub-cat”），我必须在它的点击事件上向一个元素（h2）添加一个类。小提琴链接

$('.container h2').click(function(){
//alert('hi');
if($(this).has(".sub-cat")){
    $('.container h2').addClass(highlight);
}
else if () {
    $('.container h2').removeClass(highlight);
}

});

Answer 1

当你使用 click 然后this引用你点击的 h2 ，使用.parent()to （或 .closest('.container') 然后使用你的查找：

http://jsfiddle.net/gSCQ7/7/

var highlight = "highlight";

$('.container h2').click(function(){
    var hasSubCategorys = $(this).parent().find(".sub-cat").length > 0;
    $(this)[hasSubCategorys  ? 'addClass' : 'removeClass'](highlight);
});

或者，如果您希望它更具可读性：

var highlight = "highlight";

$('.container h2').click(function(){
    var hasSubCategorys = $(this).parent().find(".sub-cat").length > 0;
    if(hasSubCategorys) {
        $(this).addClass(highlight);
    } else {
        $(this).removeClass(highlight);
    }
});

编辑： http: //jsfiddle.net/gSCQ7/10/将 CSS 代码更改为比.container h2vs更具体.hightlight

Answer 2

$('.container h2').click(function(){
    if ($(this).closest('.container').find('.sub-cat').length) {
        $(this).addClass('highlight');
    } else {
        $(this).removeClass('highlight');
    }
});​

单击 h2 元素时，使用closest()向上遍历 DOM 树并找到第一个具有类 'container' 的父元素，然后使用find()向下遍历 DOM 找到具有类 'sub-cat' 的元素。如果找到 '.sub-cat' 元素length（

树遍历的 jQuery 文档

Answer 3

尝试

if( $(this).parent().find(".sub-cat").length > 0 ) {
  ...
}

或者

if( $(this).closest(".container").find(".sub-cat").length > 0 ) {
  ...
}