Question

是否可以使用jQuery从URls列表中将数组中每个URL的内容追加到给定容器中？

像这样：

<li class="contacts"><a href="index.php#contact1">Contact 1</a>
<li class="contacts"><a href="index.php#contact2">Contact 2</a>
<li class="contacts"><a href="index.php#contact3">Contact 3</a>
<li class="contacts"><a href="index.php#contact4">Contact 4</a>

我知道如何使用jQuery获取一系列URL：

$(document).ready(function() {
    var allLinks = $('li.contacts a').map(function(i,el) { return $(el).attr('href');     });
    console.log($(allLinks));
});

好的，我在allLinks变量中有一系列的URL。我现在想用.get（）函数附加每个URL的#content元素的内容。

如何从数组循环第一个到最后一个URL并将其内容附加到当前页面？它基本上应该像这样结束：

<div id="currentpage">
//#content of URL1
//#content of URL2
//#content of URL3
//#content of URL4
</div>

动态生成网址列表（这不是问题）。

我试过这个：

$(document).ready(function() {
    var allLinks = $('li.contacts a').map(function(i,el) { return $(el).attr('href'); });
    console.log($(allLinks));

  var curr  = 0;
        if (curr++ > allLinks.length) curr = 0;

        $.get(allLinks[curr],function(data){
        var myContent = $(data).find('#content').children();
            jQuery('#wrapper').append(myContent);
   });
});

但没有成功。任何线索？

Answer 1

更新回答：（加载点击href到div）

$('.contacts a').click(function() {
  var url= $(this).attr('href');
  $('#currentpage').html('loading...');
  $.ajax({
     url: url
  }).success(function(data) {
     $('#currentpage').html(data);
  });       
  return false;
});
//JSBin http://jsbin.com/ucobuv/3/edit
//No need for the allLinks variable here

旧答案:(加载所有链接）

(function getContent(i) {
    $.ajax({
        url: allLinks[i++]
    }).success(function(data) {
        $('#currentpage').append(data);
        if(allLinks[i]) getContent(i);
    });
})(0);
//JSBin http://jsbin.com/ucobuv/1/edit

jQuery使用.get / ajax在数组中追加多个URL的内容

1 个答案: