如何使用 jquery 选择具有特定“alt”属性的图像

Question

我的页面中有以下 html。

 <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>

我需要打开 style="display: block;" 具有类 bb-item 的 div — 具有特定 alt 的图像。例如，如果 alt 是 '5 copy_200comp.jpg' ，那么该特定图像的父 div 将变成这样：

 <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>

我尝试 var src = $('img[alt="example"]') 和类似的构造，但它们不起作用。

原文由 neethu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 :has() 选择器，如下所示。

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

选择器 .bb-item:has(img[alt="5 copy_200comp.jpg"]) 将选择具有类 bb-item 的元素，其中包含具有指定 alt 属性值的图像。

演示

原文由 Tushar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 .attr("element") 的编辑问题有这么多 img 所以使用 .each() 检查所有 alt

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

原文由 David Jaw Hpan 发布，翻译遵循 CC BY-SA 3.0 许可协议