Javascript 循环遍历编号的类并附加缩短的url

我正在使用bitly脚本来缩短URL并将结果插入span标记

使用jquery，我将如何循环使用以下列表ID并用缩短的url替换长url

<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>

测试这一点：

    (function ($) {
    function get_short_url(long_url, login, api_key, func) {
        $.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";

    $("ul.list-parent li").each(function()
                                {
                                   var long_url = $(this).find("span").text();

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


})(jQuery);

---

您必须将

.ajax

与

数据类型一起使用：“jsonp”

。要进行迭代，请使用

。每个
如下所示：

使用
.each（）
jquery函数在选择器上迭代：

$('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);
      });
    });

我认为在呈现页面之前在服务器端执行此操作更有意义。但实际上不能这样做。这是一个较旧的rails应用程序，我无法升级gems版本以使任何东西可用。这就是我们提出的解决方案。
$j.each($j("li div.primary"), function() {
    var long_url = $j(this).find("span").html();

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

(function ($j) {
  function get_short_url(long_url, login, api_key, func) {
      $j.ajax({
        url: "http://api.bitly.com/v3/shorten",
        data: {
          "format": "json",
          "apiKey": api_key,
          "login": login,
          "longUrl": long_url
        },
        dataType: "jsonp",
        success: function (response) {
          func(response.data.url);
        }
    });
  }

  var login = "bitlyapioauthdemo";
  var api_key = "R_f6397a37e765574f2e198dba5bb59522";

    $(".unit-link span").each(function() {
      var $this = $(this);
      get_short_url($this.text(), login, api_key, function (short_url) {
        $this.text(short_url);
      });
    });

})(jQuery);

$('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);
      });
    });