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/.container h2 CSS コードをvsより具体的に変更.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)、クリックした h2 に「highlight」クラスを追加します。そうでない場合は、クリックした h2 から「highlight」クラスを削除します。

ツリー トラバーサルの jQuery ドキュメント

Answer 3

試す

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

また

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