title: jQuery .each() function shows always last link in iframe
body: <p>I have some links on my page and everyone is linked to a popup which should load an <code>iframe</code> with a dynamic source attribute. The <code>iframe</code> has a div called 'pholder' in which the <code>iframe</code> should be loaded. So on every link should be another <code>iframe</code>. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:</p>
  
  <pre><code>&lt;div id="toPopup3"&gt;
      &lt;div id="videoContainer"&gt;
          &lt;div id="activeVideo"&gt;
              &lt;div class="pholder"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!--toPopup3 end--&gt;
  </code></pre>
  
  <p>I have to say that my links all have the class <code>toPopup3 link + e</code>. <code>e</code> is the maximum of Videos (0-23). So I use this code to add the <code>iframe</code>:</p>
  
  <pre><code>var videoLink;
  var split;
  
  $('[class^="topopup3 link"]').each(function(){
      videoLink = $(this).attr('href');
      split = videoLink.split("/");
  });
  
  $('.pholder').html('&lt;iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&amp;byline=0&amp;portrait=0&amp;color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;');
  </code></pre>
  
  <p>So it always shows the last source in the <code>iframe</code> and I don't get rid of it. Can someone help me?</p>
  
  <p>Here is a link to the live version of the page: <a href="http://dev.jantofilm.ch/" rel="nofollow">Live Page</a>. The problem occurs at 'film production'. I also put <code>console.log(split[3]);</code> in the code to see the order of the links.</p>