找到父級背景顏色不透明

Question

我嘗試找到背景顏色不透明的最近父級。

第一個代碼起作用，它找到父代，但是那裏的顏色是透明的。

bg = (e.parentsUntil($(this).has().css("background-color"))).css("background-color"); 

所以我爲此努力奮鬥：

bg = (e.parentsUntil($(this).has().css("background-color") <> 'transparent').css("background-color"); 

有一個小問題，那鉻定義了RGBA（0,0,0,0）透明，但是這應該是可能有或聲明儘快第一個障礙被採取。

Answer 1

有趣的問題！
我只是找到了一種方法來做到這一點。

對於Chrome和Opera，你要檢查計算值rgba(0,0,0,0)代替transparent。

對於Firefox和Internet Explorer，您必須檢查transparent。

在下面的代碼片段中，在不透明（灰色背景）的div上添加了紅色邊框。
並且將藍色邊框添加到透明的邊框......僅供您參考。
;）

$(".test").click(function(e){ 
 
    
 
    var parents = $(e.target).parents("div"); 
 
    parents.each(function(i){ 
 
    console.log("element #"+i); 
 
    console.log("Background: "+$(this).css('background')); 
 
    console.log("Background-color: "+$(this).css('background-color')); 
 

 
    // Chrome & Opera 
 
    if($(this).css('background-color').indexOf('rgba(0, 0, 0, 0)') == 0 
 
     // Firefox & Internet Explorer 
 
     || $(this).css('background-color').indexOf('transparent') == 0){ 
 

 
     $(this).css({"border":"2px solid blue"}); 
 
     console.log("Setting border to blue.\n\n"); 
 
    }else{ 
 
     $(this).css({"border":"2px solid red"}); 
 
     console.log("Setting border to red.\n\n"); 
 
    } 
 
    }); 
 
    console.log("Red border means NOT transparent."); 
 
});

.one{ 
 
    background:grey; 
 
    height:200px; 
 
    padding:40px; 
 
} 
 
.two{ 
 
    background:transparent; 
 
    height:200px; 
 
    padding:40px; 
 
} 
 
.three{ 
 
    background:transparent; 
 
    height:200px; 
 
    padding:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="one"> 
 
    <div class="two"> 
 
    <div class="three"> 
 
     <span class="test">Hello - click me!</span> 
 
    </div> 
 
    </div> 
 
</div>

這可能是最好的檢查它在整頁模式。
要在其他瀏覽器中測試此功能，您可以使用this CodePen。