Find text (in a loop) using filter and append another div with thumbmail with jQuery

Question

I'm attempting to filter through a loop of results to find specific text, if it exists, I want to append a single div with a thumbnail image. What I have works, but it appends all of the divs within the loop. I have tried .()closest and .parent(). All of which append all of the divs within the loop. I only want to append the nearest div to the filtered text.

What am I doing wrong?

if( $("span").text().indexOf('90509BR') >= 0) {
        $('div.little-img').parent().find('div.little-img').append('<img style="float:left;" height="75px" width="75px" id="theImg" src="/images/uploads/EPDM_Yellow_Peroxide_p8sm.png" />');
    }

Here's a fiddle http://jsfiddle.net/C9Fft/4/

Answer 1

.closest won't work in the context of your markup.

You'll need to traverse the tree in a different way.

http://jsfiddle.net/justiceerolin/zVe69/

    $('span:contains("90509BR")').parent().prev('div.little-img')
      .append('<img style="float:left;" height="75px" width="75px" id="theImg" src="/images/uploads/EPDM_Yellow_Peroxide_p8sm.png" />');

:contains does the text search. parent() goes up to .small, and prev looks at the element before it.

Answer 2

$('span:contains("90509BR")').closest('div.little-img').append('<img style="float:left;" height="75px" width="75px" id="theImg" src="/images/uploads/EPDM_Yellow_Peroxide_p8sm.png" />');