Javascript - Find IMG source and change DIV background

Question

I have found many examples for different circumstances, but im just not experienced enough to combine them and accomplish the result I want. I am trying to create a TamperMonkey/GreaseMonkey script to highlight a DIV that matches a particular image source.

The website code is as follows, I cannot change it, but I removed the URL for the image and excess code so its easier to read:

<div class="listing_results>
    <div class="listing_row" id="listing_1">
        <div class="listing_img_container">     
            <img id="listing_1_image" src="image-source-1.jpg">
        </div>
    </div>
    <div class="listing_row" id="listing_2">
        <div class="listing_img_container">     
            <img id="listing_2_image" src="image-source-2.jpg">
        </div>
    </div>
    <div class="listing_row" id="listing_3">
        <div class="listing_img_container">     
            <img id="listing_3_image" src="image-source-3.jpg">
        </div>
    </div>
</div>

Im looking for code to search for image-source-#, and change the background color of the listing-row DIV when I find it (for example, search for image-source-2.jpg and change listing_row to green).

this is a very simple one where did you stuck ? some helpful links https://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery — Madhawa Priyashantha, Oct 21 '17 at 16:50
Thanks for the link, but a lot of those answers/comments are above my skill set. Im not necessarily looking for anything that uses best practice or is the most efficient. I have tried using simple **if**, **else if**, **else** statements but im not familiar with using selectors and manipulating HTML based on the results. — Ryan B, Oct 21 '17 at 16:57

score 0 · Accepted Answer · answered Oct 21 '17 at 16:54

$('img[src="image-source-2.jpg"]').parent().css('background-color','red');

   div{
      padding:5px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="listing_results>
    <div class="listing_row" id="listing_1">
        <div class="listing_img_container">
            <img id="listing_1_image" src="image-source-1.jpg">
        </div>
    </div>
    <div class="listing_row" id="listing_2">
        <div class="listing_img_container">
            <img id="listing_2_image" src="image-source-2.jpg">
        </div>
    </div>
    <div class="listing_row" id="listing_3">
        <div class="listing_img_container">
            <img id="listing_3_image" src="image-source-3.jpg">
        </div>
    </div>
</div>

Thank you, this works well. I also had to add `var $ = window.jQuery;` to make jQuery work. Turns out I also had a working version using Javascript, but because the page took so long to load, my IF statements were being run before any of the conditions could be true. — Ryan B, Oct 22 '17 at 19:12

Javascript - Find IMG source and change DIV background

1 Answers1