Question

I have this structure

<p class="descr">
  <span>something here</span>
  <img src="test" />
</p>

<p class="descr">
  <span>somthing else here</span>
  <img src="test2" />
  <img src="test3" />
</p>

so there can be more than one image inside of a <p> element.

What i need to do is loop through each <p> and then each <img> inside of it and add something to the front of it. Any help is appreciated. I tried doing an .each() but it’s not working.

Answer 1

Try this:

$('p.descr > img').each(function() {
    // Make this code do what you want.
    $(this).prepend('<span>Prepended Content</span>');
});

The variable this represents the current image inside this function. In this example, I’m injecting a span element before each image inside a paragraph, but only direct descendant images.

This function can be shortened if you’re only going to add another element before each image:

$('p.descr > img').prepend('<span>Prepended Content</span>');