Jquery множественная загрузка в DIV

Вот мой код

$('#right').load('textes.html #nicolas');
$('#right').load('textes.html #antoine');

проблема заключается в том, что содержимое div antoine переписывает в правильном div содержимое, загруженное div nicolas

div #right: загрузить div nicolas из файла textes.html = ok div #right: загрузить div antoine из файла textes.html = перезаписать содержимое = Нет!

Мне нравится добавлять антуан к Николя. Мне нравится добавлять Николя, затем добавлять Антон, так что # право будет Николас + Антуан.

Я пытаюсь получить содержимое в VAR... Нет

любая идея?

к тому же... я хотел бы добавить правило <hr> МЕЖДУ каждой нагрузкой

Может быть, что-то подобное можно сделать... это не работает!

$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;
Источник

6 ответов

Решение

Может быть, я что-то упускаю, но кажется, что вы все упускаете тот факт, что это вызов ajax, и вы вызываете функции процедурно, а не как функцию обратного вызова, основанную на успешном ответе ajax.

Кроме того, если вы делаете что-то более сложное, чем загрузка некоторого (X)HTML в элемент, вам, вероятно, следует использовать один из более мощных методов jQuery ajax (т. Е. Get () или post () или ajax()).

Предполагая, что вы получите (X)HTML в ответе:

// Only ONE ajax call and very simply parsing... 
$.get('textes.html', {}, function(data) {
    var $response = $('<div />').html(data);
    var $nicolas = $response.find('#nicolas')
    var $antoine = $response.find('#antoine');
    $('#right').append($nicolas).append($antoine);
},'html');

Это действительно так просто.

Источник

Почему бы не загрузить их обоих за один вызов?

$('#right').load('textes.html #nicolas,#antoine');

РЕДАКТИРОВАТЬ
Вдохновленный справедливостью, я подумал о следующем:

var $page = $('<div />').load('textes.html #nicolas,#antoine');
var $nicolas = $page.find('#nicolas');
var $antoine = $page.find('#antoine');
$('#right')
 .html($nicolas)
 .append('<hr/>')
 .append($antoine);

Это сделает только один (или два, в зависимости от того, на что похож firefox) вызовы на сервер. Таким образом экономя пропускную способность. Но это также дает вам больше свободы в том, как вставлять элементы и в каком порядке.

Источник

Вот полный исходный код для решения.

Я разместил рабочий образец на JSBin.com: http://jsbin.com/ulodu (редактируется через http://jsbin.com/ulodu/edit).

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script>
$(function(){
  $.get(
    'http://jsbin.com/oyuho',
    function(response){
      /* 
        Wrap the response in a <div /> so that we can use
        find() instead of filter(). Also remove <script> tags.
        This is essentially what $.load() does.
      */  
      var responseWrapper = $('<div />').append(response.replace(/<script(.|\s)*?\/script>/g, ""))
      $('#content')
        .append(responseWrapper.find('#nicolas'))
        .append('<hr />')
        .append(responseWrapper.find('#antoine'));
    }
  );
});
</script>
</head>
<body>
  <div id="content"></div>
</body>
</html>
Источник 
var nicolas = $('<div />').load('textes.html #nicolas');
var antoine = $('<div />').load('textes.html #antoine');
$('#right')
    .append(nicolas.children())
    .append('<hr />')
    .append(antoine.children())
;

Или Пим Джагер.

Источник

Смотрите функцию appendTo.

Источник

Я получил это работает с ДЕЙСТВИТЕЛЬНО ПРОСТОЙ ответом KyleFarris

Я даже упростил это немного больше, и он работает нормально

Спасибо всем, вот окончательный код:

<script>
$.get('textes.shtml', {}, function(data) {
    var $response = $('<div />').html(data);
    $('#right')
    .append($response.find('#nicolas'))
    .append('<hr />')
    .append($response.find('#antoine'));
},'html');
</script>
Источник
Другие вопросы по тегам