What is the different between these 2 snippets?

What is the different between these 2 snippets?

Need somebody to help me these 2 snippets for code produce different results. Particularly the highlighted part. 

  2. $(function () {
  3. //Code Snippet 1
  4.     $('div.chapter a').attr({
  5.         'rel':'external',
  6.         'title': 'Learn more about '+ $(this).text() + ' at Wikipedia'
  7.     })
  8. //Code snippet 2
  9.     $('div.chapter a').each(function (index){ $(this).attr({
  10.         'rel': 'external',
  11.         'title': 'Learn more about ' + $(this).text() + ' at Wikipedia'
  12.     }) })
  13. })

I am running the above code snippets individually on the following HTML individually. 
  2. <!DOCTYPE html>

  4. <html lang="en">
  5.   <head>
  6.     <meta charset="utf-8">
  7.     <title>A Christmas Carol</title>
  8.     <link rel="stylesheet" href="04.css" type="text/css" />
  9.     <script src="./scripts/jquery.js"></script>
  10.     <script src="./scripts/05Dom.js"></script>
  11.   </head>
  12.   <body>
  13.       <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
  14.       <div id="f-author">by Edwin A. Abbott</div>
  15.       <h2>Part 1, Section 3</h2>
  16.       <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
  17.       <div id="excerpt">an excerpt</div>
  18.       <div class="chapter">
  19.           <p class="square">
  20.               Our Professional Men and Gentlemen are Squares
  21.               (to which class I myself belong) and Five-Sided Figures or <a>href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.
  22.           </p>
  23.           <p class="nobility hexagon">
  24.               Next above these.....
  25.               ..<a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>,
  26.               ae r.... <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>....hed from a <a href="http://en.wikipedia.org/wiki/Circle">circle</a>, 
  27.               he is
  28.               ..
  29.           </p>
  30.           <p>
  31.               <span class="pull-quote">
  32.                   It is a <span class="drop">
  33.                       Law of
  34.                       Nature
  35.                   </span> with ... <strong>....</strong> than ..
  36.               </span>, so ....
  37.           </p>
  38.           <!-- . . . code continues . . . -->
  39.       </div>
  40.   </body>
  41. </html>

The output when i run the 1st code snippet as viewed by placing the mouse pointer over the 'hexagon' link

The output when i run the 2nd code snippet as viewed by placing the mouse pointer over the 'hexagon' link


I wanted to understand why does $(this).text() generates a different output in each of these cases. In 1st case it seem to be referring to the entire html and in the 2nd case it refers to the text in the <a> tag which was the actual intention. The rel attribute turns out fine in both the cases.