finde Eltern-Hintergrundfarbe nicht transparent

Question

Ich versuche, den nächsten Elternteil mit einer nicht transparenten Hintergrundfarbe zu finden.

Der erste Code funktioniert, es findet die Eltern, aber dort ist die Farbe transparent.

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

So kämpfe ich mit diesem:

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

Es ist ein kleines Problem, dass Chrom definiert transparent mit rgba (0,0,0,0), aber dies sollte mit einer oder Aussage möglich sein, sobald die erste Hürde genommen ist.

Answer 1

Interessante Frage!
Ich habe gerade einen Weg gefunden, dies zu tun.

Für Chrome und Opera, haben Sie für den berechneten Wert rgba(0,0,0,0) statt transparent zu überprüfen.

Für Firefox und Internet Explorer müssen Sie nach transparent suchen.

Im folgenden Code-Schnipsel wird ein roter Rahmen auf dem div hinzugefügt, der nicht transparent ist (grauer Hintergrund).
Und eine blaue Grenze wird zu denen hinzugefügt, die transparent sind ... Nur für Sie zu sehen.
;)

$(".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>

Es kann am besten sein, um es in voller Seitenmodus zu überprüfen.
Um dies in anderen Browsern zu testen, können Sie this CodePen verwenden.