jQuery获取父元素的css background-color值

Question

I want to do something a bit awkward and my pseudo code isn't working, but should explain what I'm trying to do. I have groups of 4 radio buttons, in 6 separate divs, so 24 radios in total. Each div is a particular background colour. When a radio button within a particular div is selected, I need to grab the colour of the div the selected radio button is within, and have it stored in a variable ready to apply it to an element that'll be created next...

    $("#voucher_selection_container input:radio").change(function(){
    //var color = $(this).parent("div").css("background-color");
    //alert(color);
    $("#voucher_customisation_container").slideDown(600);
    //$("#voucher_customisation_container .voucher_box").css("background-color", color);
});

Any help would be appreciated. :) Thanks.

Answer 1

尝试使用closest()来查找DOM树中的下一个匹配元素

var color = $(this).closest("div").css("background-color");

Answer 2

$("#voucher_selection_container input:radio").change(function(){

     var color = $(this).parent("div").css("backgroundColor");

});

Answer 3

$('input:radio').change(function(){
 var backColor = $(this).parent().css("background-color");
});

Answer 4

By using the parent function you'll be able to access the parent div

$('radio').click(function(){
  $(this).parent();
});

Answer 5

$("#voucher_selection_container input:radio").change(function(){
    var color = $(this).parent().css("background-color");
    alert(color);
    //$("#voucher_customisation_container").slideDown(600);
    $("#voucher_customisation_container .voucher_box").css("background-color", color); 
});

Try this