I am attempting to target and style all instances of the "picture" element nested inside any divs with a class of "highlights". Below is an excerpt from a webpage showcasing the picture element within a "highlights" div...
<div class="row highlights">
<div class="col-sm-12">
<div class="bx-adapt">
<div class="col-sm-6 col-lg-4">
<figure class="pic square">
<picture>
Insert Content Here
</picture>
</figure>
</div>
</div>
</div>
</div>
Upon examining similar questions on this platform, I attempted the following JavaScript code to identify and style the relevant picture elements without success. Instead, only receiving a success alert for each individual picture element.
$('picture').each(function(i, elm) {
if($(elm).closest(".highlights").length > 0) {
$('picture').css("border","10px solid red");
alert("Success");
}
});
It seems I may be incorrectly targeting the relevant picture elements, but I cannot pinpoint where exactly I am going wrong. Any input on this query would be greatly appreciated.
edit
While the suggestions provided by others appear valid, I suspect that the way the webpage is being generated is hindering my ability to select the picture element for some unknown reason. While I can successfully style images within the picture element (applying a red border), I seem unable to do so with the picture element itself.
Adding more context, the webpage employs lazy loading to progressively load images, causing page performance issues in Internet Explorer. Therefore, my aim is to target specific elements that could potentially be contributing to the slowdown.