Home/ Questions/Q 8871941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:06:20+00:00

I want to iterate over a set of p elements and add a dynamically

  • 0

I want to iterate over a set of p elements and add a dynamically created img element to each one. When the added image is loaded I want to add some text to the p element which contains it using a custom utility function called addText.

My non working code: (See it in action at http://jsbin.com/abebof/2/edit)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
    <style>img { max-width: 100%; }</style>
  </head>
  <body>
    <p>Image #1</p>
    <p>Image #2</p>
    <p>Image #3</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

function addText(paragraph, text) {
  paragraph.text(paragraph.text() + '. ' + text);
  console.log('called');
}

$('p').each(function (i) {
  jthis = $(this);
  jthis.css('border', '5px solid');
  addText(jthis, 'The function works!');

  var jimg = $('<img src="http://i.imgur.com/IH38U.png class="loading" />');

  jimg.load(function () {
    addText(jthis, 'Loaded!');
  });
  jimg.appendTo(this);
});

    </script>
  </body>
</html>

Problems with it I’m asking for help with:

  1. No image is loaded into the Image #3 paragraph. Why not?
  2. The Loaded! message is printed into the Image #3 paragraph for each image. It should be printed into the paragraph containing the image. How do I rectify it?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A big thanks to mplungjan for helping me out1 Since I feel his answer can be improved further and stick closer to the original code I provide mine too:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Example</title>
    <style>img { max-width: 100%; }</style>
  </head>
  <body>
    <p>Image #1</p>
    <p>Image #2</p>
    <p>Image #3</p>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>

function addText(paragraph, text) {
  paragraph.append(' ' + text); // #1 below
  console.log('called');
}

$('p').each(function (i) {
  jthis = $(this);
  jthis.css('border', '5px solid');
  addText(jthis, 'The function works!');

  var jimg = $('<img class="loading" />'); // #2 below.

  jimg.load(new function () {  // #3 below                  new, it creates a new closure each time.
    addText(jthis, 'Loaded!'); // WORKS now since I added
  });
  jimg.attr("src","http://i.imgur.com/IH38U.png");


  jimg.appendTo(this);
});

    </script>
  </body>
</html>

    Explanations of bug fixes in the OP source:

    1. paragraph.text() retrives the plain text in paragraph, filtering out all other DOM nodes. I tried to change simply the text by using paragraph.text('the new text') to set simply the text. I was wrong. It effectively sets the plain text and removes everything else which was there. If I think about it that’s logical. After all, if it would simply change the text and keep everything else it wouldn’t be able to know where I wanted the text (ie before or after the img node).
    2. The created img node starts loading its image as soon as it can. It does not wait until it’s included in the DOM. Therefore we must first create it without the image URL, then set the load event function and last set the image URL. If we set the URL immediately it’s possible to miss the load event.
    3. Everytime a function B is created within a function A a closure is used. The variables in A are accessable from B. The problem is that if many inner functions (Bs) are created they all share the current variables in A. To remedy this a new closure is created using new function. Confusing? It’s for me too. Read the second answer (not the accepted one, it’s false) here for more information.
    • 0