Geek Answers Handbook

How to select image with specific alt attribute using jquery

I have the html below on 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;" from a div having the bb-item class of an image having a specific alt . For example, if alt is '5 copy_200comp.jpg' , then the parent div of this particular image will look 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 do not work.

+6
source share
8 answers

You can use :has() as shown below.

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

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

Demo

+7
source

use .attr("element") . There is so much img in your editing question, so use .each() to check all alt

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

Here's a snippet to add display:block to .bb-item if inside img inside 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>
+4
source

Let me make some functions to solve this problem. Which I think with the name of the function itself explains. You can check the example here http://jsbin.com/nicuxoriqu/edit?html,js,output Please note that the correct container from the image alt attribute is displayed.

To search for the image, we will use the CSS attribute selector [attr=value] , which exactly matches the value, and then we will find the .bb-item container closer to this 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();
+4
source

It is working fine. I just select and show the src of the 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>
+2
source

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>
+1
source

You can try this by this logic if it has alt src in it and any of its parents has a bb-item class and then show it to 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>
+1
source

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>
+1
source

More articles:


All Articles