CODEWITHSUNDEEP
javascriptjquerycss
neethu
neethu

Reputation: 193

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

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.

Upvotes: 8

Views: 16329

Answers (8)

user6213434
user6213434

Reputation:

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>

Upvotes: 1

zuuul
zuuul

Reputation: 372

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>

Upvotes: 4

Ajay
Ajay

Reputation: 459

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>

Upvotes: 1

VIPIN A ROY
VIPIN A ROY

Reputation: 1781

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>

Upvotes: 1

Yordis Prieto Lazo
Yordis Prieto Lazo

Reputation: 850

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();

Upvotes: 4

Jack jdeoel
Jack jdeoel

Reputation: 4584

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

Upvotes: 8

Tushar
Tushar

Reputation: 87233

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

Upvotes: 10

Mani
Mani

Reputation: 2655

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>

Upvotes: 3

Related Questions