Change content based on text found in another div

Hi there,

I am trying to change the content of a div based on another div containing specific text.

So far, I have the following:

$("td.details:contains('copy to be found')").append("<div class='picture'><img src='new-image.jpg' /></div>");

However, it is just adding it the the div that contains the text and not the div with the class of picture.

Any ideas what I have wrong?

Thanks

It seems to be working for me as the code you posted will add the div and image into td.details.

Or I misunderstood what you wanted :slight_smile:

Sorry, I think I posted wrong - I need to change the image in the <div class='picture'>

Hi, It’s still not clear what you are trying to do :slight_smile:

Change the image to what exactly? In your example you are just appending the div with the image into the td that contains the text you specified.

How does this now relate to changing the image exactly?

Do you want to remove the image and place something else there?

I would like to replace the image with another image.

I now have this code which is a bit nearer, but I can’t manage to select the image:

$("td.details:contains('copy to be found')").prev('td').html('<img src="" />');

I’ve tried this:

$("td.details:contains('copy to be found')").prev('td.image div.picture').html('<img src="" />');

Where is the image?

Does it exist on the page or is it only in the js at the moment?

It looks to me as though you are looking for an element that contains a certain phrase and when you find it you are insert a new image into .picture.

e.g.

$("td.details:contains('copy to be found')").prev('td.image').find('div.picture').html('<img src="" />');

Note that in your example you had prev('td.image div.picture') which is never going to be a previous element as .picture is the target of that rule and is not previous to anything, You target the td first as that is previous and then find the picture within.

<table>
  <tr>
  <td class="image"><div class="picture"></div></td>
    <td class="details">copy to be found </td>
  </tr>
</table>

When the JS is run you get source like this:

<table>
  <tbody><tr>
  <td class="image"><div class="picture"><img src=""></div></td>
    <td class="details">copy to be found a</td>
  </tr>
</tbody>
</table>

The image is in a div inside a td.

Your code worked :slight_smile:

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.