Загружать определенные элементы со страницы с помощью вызова AJAX и добавлять их в список?

Question

У меня две страницы:

Page 1 имеет заголовок, пустой ol и некоторый jQuery, который вызывает функцию AJAX.

Страница 2 содержит ol, заполненный списком предметов, из которых я планирую вытащить определенные.

Используемый мной AJAX выглядит следующим образом:

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

Прекрасно работает, когда вы тянете в этот первый li. Однако, если что-то уже есть в #loader, оно заменяется. Вместо этого я хотел бы добавить новый li к уже существующим. Я пытался использовать функцию ajax(), но это не позволяет вам вызывать конкретный элемент, как это делает функция load(), или, по крайней мере, я не могу найти способ.

В конечном итоге я собираюсь сделать так, чтобы ряд li вызывался через вызов AJAX и добавлялся в уже существующий список. Проблема в том, что я застреваю при начальном добавлении. Остальное, я уверен, я могу выяснить, вызвав функцию, которая содержит цикл 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));
});

Если вам просто нужно html-содержимое li или ol, используйте вместо этого $('li:nth-child(1)',data).html() в вызовах добавления.