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

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

9 голосов
/ 15 мая 2009

Вот мой код 

$('#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 ... nope

есть идеи?

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

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

$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;

Ответы [ 6 ]

20 голосов
/ 15 мая 2009

Может быть, я что-то упускаю, но кажется, что вы все упускаете тот факт, что это 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');

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

8 голосов
/ 15 мая 2009

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

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

EDIT
Вдохновленный справедливостью, я подумал о следующем: 

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) вызовы на сервер. Таким образом экономя пропускную способность. Но это также дает вам больше свободы в том, как вставлять элементы и в каком порядке.

4 голосов
/ 15 мая 2009

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

Я разместил рабочий образец на 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>
1 голос
/ 15 мая 2009 
var nicolas = $('<div />').load('textes.html #nicolas');
var antoine = $('<div />').load('textes.html #antoine');
$('#right')
    .append(nicolas.children())
    .append('<hr />')
    .append(antoine.children())
;

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

0 голосов
/ 15 мая 2009

У меня получилось работать с ДЕЙСТВИТЕЛЬНО ПРОСТОМ ответом 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>
0 голосов
/ 15 мая 2009

См. Функцию appendTo .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...