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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.