jQuery to replace CSS class in external CSS after external JS loads

Question

I'm trying to create more mobile responsive tap targets for a website that has an external TripAdvisor widget included via external JS/CSS. I figured I'd use jQuery to replace the default external CSS class with a custom local CSS class defined in a media query for mobile devices.

Here's a screenshot of the included TripAdvisor widget along with its rendered code as viewed in Inspector.

The external CSS class I need to replace with jQuery is called "widEXCLINK". The class I want to replace that external CSS class with is called "tripAdvisorMobile".

/* Give a little extra margin and padding on iPhone screens [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    /* Give a little extra padding in the TripAdvisor widget to separate tap targets on mobile */
    .tripAdvisorMobile {
        font-style: normal;
        font-size: 107.5%;
        font-family: Arial,Verdana,"Bitstream Vera Sans",Helvetica,sans-serif;
        margin: 0;
        padding: 0 9px 9px 9px;
        border: none;
        font-weight: normal;
        text-decoration: underline;
        outline: none;
        color: #000; 
    }
}

My jQuery code sits in a WordPress footer Widget control and looks like this, but it doesn't seem to be doing the replacement. When I do the replacement manually in Inspector, it works, though. What am I missing here? The link to the dev site is http://dev-osiris-tours.pantheonsite.io/

<div id="TA_excellent278" class="TA_excellent">
<ul id="2X2ZQ1k7" class="TA_links GF8D0I0EbFmi">
<li id="CR629jdXpi3p" class="ag0WGEV">
    <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://static.tacdn.com/img2/widget/tripadvisor_logo_115x18.gif" alt="TripAdvisor" class="widEXCIMG" id="CDSWIDEXCLOGO"/></a>
</li>
</ul>
</div>     

<script src="https://www.jscache.com/wejs?wtype=excellent&amp;uniq=278&amp;locationId=10438680&amp;lang=en_US&amp;display_version=2"></script>

<script>
$( document ).ready(function() {
    $("widEXCLINK").removeClass("widEXCLINK");
    $("widEXCLINK").addClass("tripAdvisorMobile");
});
</script>

Answer 1

There are 2 issue with the way you are approaching the solution.

$("widEXCLINK")

is supposed to be

$(".widEXCLINK")

If you do not include the . sizzle engine will try to look for an element by name widEXCLINK

The second issue is specificity,

.tripAdvisorMobile { specificity ---> 0 0 1 0

should have better specificity than

#CDSWIDEXC.widEXC .widEXCLINK specificity ---> 0 1 2 0

Since the 2nd one has higher specificity, that styles will be applied. To apply the styles you will have to do this instead.

@media only screen and (max-device-width: 480px) {
    `#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {`   specificity --->  0 1 3 0

And would not need any jQuery anymore to get rid of the class.