How do I user jQuery to locate every img that has a specific src?

I have this code that repeats several times on my site:

<div class="speakers">
    <div class="speaker clearfix">
        <div class="speaker-img">
            <img alt="" src="http://temp.organization.events/images/coffeebreak-300x225.jpg">
        </div>
        <div class="speaker-content">
            <h3 class="title">
                <a href="http://temp.organization.events/schedule/break-2/">
                    Break
                </a>
            </h3>
            <a class="btn btn-border btn-grey btn-md" href="http://temp.organization.events/schedule/break-2/">
                Approfondisci
            </a>
            <a class="btn btn-border btn-grey btn-md" href="http://temp.organization.events/speaker/nessun-relatore/">
                Scopri i relatori
            </a>
        </div>
    </div>
    <div class="bar">
    	<p>
        	<i class="icon fa fa-glass">
            </i>
		</p>
	</div>
</div>

Open in new window


I need a jQuery that can recognize that this div.speakers block contains an img tag with src with the word "coffeebreak" in it.

If it is found that I need to make the following changes:

1.

the div.speaker that contains the img tag should become "display:none" (only this one, as I have other div.speaker tags on my page and I don't want them disappearing too

2.

the div.bar height should become 40px - only this div.bar of course, as I have other div.bar on the page too

3.

only the p inside this specific div.bar should have display:block
So these changes need only happen within the div.speakers that contains the img with the right src,

Any help will be appreciated.

thanks in advance
badwolfffAsked:
Who is Participating?
 
Julian HansenCommented:
This is should do what you want
$(function() {
  // FIRST find all <img> tags inside a .spearker-img clas
  $('.speaker-img img').each(function(i,v) {

    // Get the src for the image
    var img = $(this).attr('src');

    // Test it for the presence of the word coffee
    if (img.toLowerCase().indexOf('coffee') >= 0) {

      // Find the closest parent .speaker class and hide it
      $(this).closest('.speaker').hide();

      // find the .speakers parent for this element
      var parent = $(this).closest('.speakers');

      // set the .bar and the .bar p relative to the parent 
      $('.bar', parent).css({height: '40px'});
      $('.bar p', parent).css({display: 'block'});
    }
  });
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.