Изменить стиль родительского элемента с JQuery

Question

У меня есть следующий HTML: установка

<div class="one"> 
    <div class="two"> 
     <a href="#" class="three">Click</a> 
    </div> 
</div> 

И я хочу, чтобы изменить цвет фона для элемента с классом .one, когда я нажимаю на элемент .three с jQuery.

Это то, что я пытался использовать:

$(function(){ 
    $('.three')(function(){ 
     $(this).parent().parent().css('backgroundColor', 'red'); 
    }) 
}); 

Вот скрипку пример: https://jsfiddle.net/Munja/a7unbs2p/

Я искал решение здесь на SO, но не смог найти его достаточно быстро (вероятно, я не выглядел достаточно хорошо: /).

спасибо.

Answer 1

вам нужно использовать .click() или .on('click') .. и вы можете использовать .closest(), а вместо того, чтобы использовать parent() дважды

$(function(){ 
    $('.three').on('click',function(){ 
     $(this).closest('.one').css('backgroundColor', 'red'); 
    }) 
}); 

Answer 2

Поскольку это descedant элемента, вы можете использовать .parents(), который не перемещается вверх до селектора найден.

Кроме того, вы можете использовать синтаксис CSS внутри метода CSS (background-color вместо backgroundColor).

$('.three').on('click', function(){ 
    $(this).parents('.one').css('background-color', 'red'); 
}) 

Answer 3

Я не могу комментировать, так, немного дополнение к высшему ответу:

$(function(){ 
    $('.three').on('click',function(){ 
     $(this).closest('.one').css('background-color', 'red'); 
    }) 
}); 

Css не обладает свойством с именем BackgroundColor

Answer 4

Просто добавьте Нажмите событие в вашем коде. Сначала добавьте jquery.min.js, затем добавьте скрипт. Вы можете сделать это:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
    $(".three").click(function(){ 
     $(this).parent().parent().css("background","red"); 
    }); 
</script> 

Answer 5

Вы можете использовать что-то вроде этого.

$('.three').on('click',function(){ 
    $(this).closest('.one').css('backgroundColor', 'red'); 
})