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

Question

我正在使用一个 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>

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

测试这个：

    (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);

Answer 2

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

Answer 3

你必须使用.ajaxwith dataType: "jsonp"。并进行迭代，.each像这样使用：http: //jsfiddle.net/37Zv4/。

(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);

Answer 4

使用.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);
      });
    });