Может ли jQuery.load добавить вместо замены?

У меня установлена WordPress, и я пытаюсь использовать jQuery для создания эффекта Load More. У меня возникли проблемы с использованием базовой функции .load для фрагментов страницы. Я не против использовать .get, поскольку я видел некоторые темы здесь относительно этого как лучшего решения.

Здесь моя структура URL-адреса и содержание:

Первая страница: http://example.com/page/1/

HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

Вторая страница: http://example.com/page/2/

HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

У меня есть ссылка внизу страницы, и я пробовал сделать следующее:

jQuery(#articles).load('http://example.com/page/2/ #articles');

К сожалению, есть 2 проблемы. Сначала функция .load захватывает #articles div и ее содержимое со второй страницы и помещает ее в существующий #articles div. Это означает, что даже если бы это было сработано, в div были бы рекурсивные div в результате каждого щелчка. Это просто грязно.

Может ли кто-нибудь помочь мне с помощью команды просто добавить .story classes со второй страницы в #articles div на первой странице? Я могу выяснить логику автоматизации его с помощью переменных, циклов и PHP для WordPress. Просто нужно немного помочь с правильным jQuery script.

P.S. Бонусный вопрос: если кто-нибудь знает, может ли jQuery.load/.get нанести вред просмотру страниц, что важно для тех, у кого есть рекламный доход, сообщите мне! Если каждый .load/.get считается еще одним хитом для Google Analytics, мы хороши!

Спасибо!

Ответ 1

Вы не можете добавлять контент, используя метод jQuery.load(), но вы можете делать то, что хотите, jQuery.get():

$.get('/page/2/', function(data){ 
  $(data).find("#articles .story").appendTo("#articles");
});

Ответ 2

Я бы сделал это так.

$('#articles').append($('<div/>', { id: '#articles-page2' });
$('#articles-page2').load('http://example.com/page/2/ #articles > *');

#articles > * выбирает всех непосредственных детей на #article.

Ответ 3

Для добавления данных я не думаю, что вы захотите использовать $.load(). Вместо этого вам может понадобиться изучить $.ajax().

$.ajax({
  url: 'yourlocation/test.html',
  success: function(data) {
    $('.result').html(data);
    $("#yourdiv").append(data);
  }
});

Ответ 4

Попробуй, это сработало для меня.

$('#articles').append( $('<div/>').load('http://example.com/page/2/ #articles') );

Ответ 5

$.get(YourURL, function(data){ 
$('#divID').append(data);});