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

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

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");
    }
});

Answer 2

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 3

Here's a snippet to add display:block on .bb-item if the img inside has alt="example"

 if($("img").attr("alt") == "example"){ $("img").parents(".bb-item").show(); } 

 .bb-item{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bb-item" > <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="example" style="height:100%"></a></div> 

Answer 4

Let do some functions for resolve this problem. Which I think with the function name is self explanatory. You can check the example running here http://jsbin.com/nicuxoriqu/edit?html,js,output Notice that is displaying the correct container from the alt attribute of the image.

For find the image we will use the CSS attribute selector [attr=value] which match exactly with the value and then we will find the .bb-item closer container to that image.

function findImageInsideBookBlockByAlt(alt) {
  // Find the image inside the .bb-bookblock element with specific alt
  return $('.bb-bookblock img[alt="' + alt + '"]');
}

function findBBItemFromImage($image) {
  // Find the closest element from the parents node that have the class .bb-item
  return $image.closest('.bb-item');
}


var $image = findImageInsideBookBlockByAlt('4 copy_200comp.jpg');
var $BBItem = findBBItemFromImage($image);


// Do whatever you want with the $BBItem now
// From your comment, just do this
$BBItem.show();

Answer 5

It is working fine. I just select and display the src of alt attribute selector.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script> <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> <script> $(document).ready(function(){ alert($('img[alt="5 copy_200comp.jpg"]').attr("src")); }); </script> 

Answer 6

This code will work. Please check:

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

<script type="text/javascript">
$(document).ready(function() {
    $( ".bb-item a" ).each(function() {
        if($($( this ).html()).attr("alt")=='5 copy_200comp.jpg'){
                $(this).parent('div').show();
            }
    });
});
</script>

Answer 7

You can try it by this logic, if any image has alt exists in it's src , and any of his parents has bb-item class, then show it's parents:

var img = $('#bb-bookblock img');

img.each(function (index, image) {

  var imgSrc = $(image).attr('src');
  var imgAlt = $(image).attr('alt');

  if ( imgSrc.indexOf(imgAlt) != -1 ) {
    if ( $(image).parents().hasClass('bb-item') ) {
       $(image).parents().css('display', 'block');
    }
  }
});

https://jsfiddle.net/c37ostsc/8/

 $(document).ready( function () { 'use strict'; function setAltToSrc ( settedAlt ) { $('#bb-bookblock img').each(function ( index, image ) { var $image = $(image); var imgSrc = $image.attr('src'); var imgAlt = $image.attr('alt'); if ( imgAlt === settedAlt ) { $image.attr( 'src', imgSrc + imgAlt ); } imgSrc = $image.attr('src'); // To store the new src if ( imgSrc.indexOf(imgAlt) != -1 ) { if ( $image.parents().hasClass('bb-item') ) { $image.parents().css( 'display', 'block' ); } } }); } setAltToSrc('/9b59b6'); $('p').text( $('img').eq(2).attr('src') ); }); 

 p { position: absolute; top: 150px; left: 0; z-index: 88888; color: #666 } img { width: 100px !important; height: 100px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px"> <div class="bb-item" style="display: none;"> <a href="#"> <img src="http://placehold.it/350x150" alt="/2ecc71"> </a> </div> <div class="bb-item" style="display: none;"> <a href="#"> <img src="http://placehold.it/350x150" alt="/9b59b6"> </a> </div> <div class="bb-item" style="display: none;"> <a href="#"> <img src="http://placehold.it/350x150" alt="/3498db"> </a> </div> <div class="bb-item" style="display: none;"> <a href="#"> <img src="http://placehold.it/350x150" alt="/ecf0f1"> </a> </div> </div> <p> </p> 

Answer 8

By using code organization .

<div class="main">
<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>
</div>
<script type="text/javascript">
     (function($, window, document, undefined)
    {
        var
         constants = {
            wrapper: '.main',
            sub: '.bb-item a img',
            hiddenDiv: '.bb-item'
        },
        properties = {
            wrapper: null,
            sub :null,
            hiddenDiv :null
        },
          methods = {
             init: function ()
            {
                 properties.wrapper = $(constants.wrapper);
                 properties.sub = properties.wrapper.find(constants.sub);
                 properties.hiddenDiv = properties.wrapper.find(constants.hiddenDiv);
                  properties.hiddenDiv.css({
                   display: 'none'
                 });

                        properties.sub
            .each( methods.pickAlt );

            },
             pickAlt: function (event)
            {

                var $this = $(this);
               var needToShow = $this.attr('alt');
                if(needToShow == '5 copy_200comp.jpg'){

                    methods.show($this);
                }
            },
             show: function (event)
            {
                var $this = event;
                $this.parent().parent().css({
                   display: 'block'
                 });
            }


          };

      $(document).ready(methods.init);
    })(jQuery, window, document);

</script>