How to select an image having particular 'alt' attribute using jquery

Question

I have the below html in my page .

<div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px">
    <div class="bb-item" style="display: none;">
        <a href="#">
            <img src="photorepository/admin/a-123/14/31 copy_200comp.jpg" alt="31 copy_200comp.jpg" style="height:100%">
        </a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/32 copy_200comp.jpg" alt="32 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/4 copy_200comp.jpg" alt="4 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a>
    </div>
</div>

I need to turn style="display: block;" of the div having class bb-item of the image having a particular alt. For example if the alt is '5 copy_200comp.jpg', then the parent div of that particular image turns like this:

<div class="bb-item" style="display: block;"> <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a></div>

I tried var src = $('img[alt="example"]') and similar constructs but they aren't working.

Answer 1

You could use :has() selector as follow.

$('.bb-item:has(img[alt="5 copy_200comp.jpg"])').show();

The selector .bb-item:has(img[alt="5 copy_200comp.jpg"]) will select the element having class bb-item having an image inside it with the specified alt attribute value.

Demo

Answer 2

use .attr("element") .Your edit question have so many img so use .each() for check all alt

$('img').each(function(){
  if($(this).attr("alt") == "5 copy_200comp.jpg"){
    $(this).closest(".bb-item").css("display","block");
    }
});