title: Replacing elements with jquery
body: <p>I have the following jquery markup:</p>
  
  <pre><code>&lt;p class="article"&gt;
      &lt;font size='5'&gt;&lt;b&gt;&lt;span class='articleHeading'&gt;Article1&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;br/&gt;
      &lt;span class='myArticle'&gt;11111111111111111&lt;/span&gt;    
  &lt;/p&gt;
  &lt;p class="article"&gt;
      &lt;font size='5'&gt;&lt;b&gt;&lt;span class='articleHeading'&gt;Article2&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;br/&gt;
      &lt;span class='myArticle'&gt;22222222222222222222&lt;/span&gt;                      
  &lt;/p&gt;
  &lt;p class="article"&gt;
      &lt;font size='5'&gt;&lt;b&gt;&lt;span class='articleHeading'&gt;Article3&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;br/&gt;
      &lt;span class='myArticle'&gt;333333333333&lt;/span&gt;                                   
  &lt;/p&gt;
  </code></pre>
  
  <p>What I am trying to do is to iterate over json data (which works successfully), and put
  new data inside the spans of classes 'articleHeading' and 'article':</p>
  
  <p>I tried this:</p>
  
  <pre><code>     var articleHeadings=$('.articleHeading');
                  var articles=$('.myArticle');
                  var z=0;
                  for(var i=0;i&lt;data.length;i++){
                      var obj = data[i];
  
                      for(var key in obj){
                          ArticleHeadings[z].text(key);
                          articles[z].text(obj[key]);
                          z++;
                      }
                  } 
  </code></pre>
  
  <p>I updated my question. I am puttin all my spans into 2 array..heading and the article..and then using them..but it doesnt work</p>
  
  <pre><code> //I want to obtain all the spans with the classes elements and put them in 2 arrays.
    var articleHeadings=$('.articleHeading');
     var articles=$('.myArticle');
     //I want to add text to the first element like this.                
                      articleHeadings[0].text("1111111111");
  //There is an element inside..but when using text nothing appears.
  </code></pre>
  
  <p>But when I use this:</p>
  
  <pre><code>$('.articleHeading').text("1111111111");
  </code></pre>
  
  <p>The 11111 do get replaced..lol. Why? is it because there is a shallow copy by value? instead of by reference?</p>
  
  <p>I found the solution. I had to wrap each item of my array with $():</p>
  
  <pre><code>          var articleHeadings=$('.articleHeading');
                  var articles=$('.myArticle');
  
  
  
  
                  var z=0;
                  for(var i=0;i&lt;data.length;i++){
                      var obj = data[i];
  
                      for(var key in obj){
  
                      //  alert($(articleHeadings[z]).text());
                         **$(articleHeadings[z]).text(key);**
                         **$(articles[z]).text(obj[key]);**
                          z++;
                      }
                  }
  </code></pre>