Question

I am using a bitly script to shorten urls and insert the resulits into a span tag.

Using jquery, how would I loop through the following list ids and replace the long url with the shortened one.

<ul class="vertical-list list-parent">
    <li id="license_key_0">
      <div class="primary two-quarter unit-link">
          <span>http://localhost:3000/projects/313f7f5586b39cd9bf7a894894564036</span>
      </div>
    </li>
    <li id="license_key_1">
    <div class="primary two-quarter unit-link">
         <span>http://localhost:3000/projects/287a990d17b680fe410329cb95af89b9</span>
   </div>
  </li>
<li id="license_key_2">
  <div class="primary two-quarter unit-link">
       <span>http://localhost:3000/projects/ff381cdb94070e1903c5f6fddc31b148</span>
  </div> 
</li>
  </ul>

The jquery:

(function ($j) {
      function get_short_url(long_url, login, api_key, func) {
        $j.getJSON(
          "http://api.bitly.com/v3/shorten?callback=?", {
          "format": "json",
          "apiKey": api_key,
          "login": login,
          "longUrl": long_url
        },
        function (response) {
          func(response.data.url);
        });
      }

      var login = "my_login";
      var api_key = "my_api_key";
      var long_url = "m";

      get_short_url(long_url, login, api_key, function (short_url) {
        console.log(short_url);
      });

    })(jQuery);

Answer 1

use .each() jquery function to iterate over the selector:

$('ul .unit-link span').each(
    function(index){
      var long_url = $(this).text();
      get_short_url(long_url, login, api_key, function (short_url) {
          console.log(short_url);
      });
    });