javascript - 使用 AJAX 调用从页面加载特定元素并将它们附加到列表中？

Question

我有两页:

第 1 页有一个标题、一个空的 ol 和一些调用 AJAX 函数的 jQuery。

第 2 页 有一个 ol，其中包含我计划从中提取特定列表项的列表项。

我使用的 AJAX 如下所示:

$("#loader").load("ajax.html li:nth-child(1)");

它非常适合拉入第一个li。但是，如果#loader 中已有某些内容，则会被替换。相反，我希望它将新的 li 附加到现有的后面。我尝试过使用 ajax() 函数，但这不允许您像 load() 函数那样调用特定元素，或者至少，我找不到办法。

我最终要做的是通过 AJAX 调用调用一系列 li 并将其添加到已存在的列表中。问题是我陷入了最初的添加。其余的我很确定我可以通过调用包含 for 循环的函数来弄清楚。

Answer 1

使用 $get 而不是 $.ajax

var loadContent = function(url, targetSelector, contentSelector){
   var target = $(targetSelector);
   $.get(url, function(data){
     target.append($(targetSelector, data));
   });
};

loadContent('ajax.html', '#loader', 'li:nth-child(1)');

您当然可以跳过函数定义，只使用 $.get 的回调来完成这一切:

$.get('ajax.html', function(data){
   $('#loader').append($('li:nth-child(1)',data));
});

如果您只想要 li 或 ol 的 html 内容，请使用 $('li:nth-child(1)',data)。 html() 在附加调用中改为。