Jquery Multiple load in a DIV

Here is my code

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

the problem is that the content of the div antoine overwrite in the right div the content load by the div nicolas

div #right : load div nicolas from file textes.html = ok div #right : load div antoine from file textes.html = overwrite content = No!

I like to append antoine to nicolas I like to add nicolas then add antone so the #right will be nicolas + antoine

I have try to get the content into a var... nope

any idea ?

on top of that... i will like to add a rule <hr> BETWEEN each load

Maybe something like that can be done... it don't work !

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

标签： jquery html load

6条回答

我只想做你的唯一

2楼-- · 2019-01-17 05:23

See the appendTo function.

0人赞添加讨论(0) 举报

我只想做你的唯一

3楼-- · 2019-01-17 05:29

Maybe I'm missing something but it seems like you all have been missing the fact that this is an ajax call and you are calling functions procedurally and not as a callback function based on a successful ajax response.

Besides, if you are doing anything more complex than loading some (X)HTML into an element, you should probably use one of the more powerful jQuery ajax methods (i.e., get() or post() or ajax()).

Assuming you'll get (X)HTML in the response:

// 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');

It's really as simple as that.

0人赞添加讨论(0) 举报

老娘就宠你

4楼-- · 2019-01-17 05:29

WHy not load them both in one call:

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

EDIT
Inspired by Justice way I thought of the follwoing:

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);

This will make only one (or two, depending on what firefox feels like) calls to the server. Thus saving bandwidth. But it also gives you more freedom in how to insert the elements and in which order.

0人赞添加讨论(0) 举报

来，给爷笑一个

5楼-- · 2019-01-17 05:38

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

Or, Pim Jager's way.

0人赞添加讨论(0) 举报

做自己的国王

6楼-- · 2019-01-17 05:49

Here's the full source code for a solution.

I've hosted a working sample on JSBin.com: http://jsbin.com/ulodu (Editable via 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>

0人赞添加讨论(0) 举报

神经病院院长

7楼-- · 2019-01-17 05:49

I got it working with the REALLY SIMPLE answer of KyleFarris

I even simplified it a little more, and it work fine

Thnaks everyone, here is the final code :

<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人赞添加讨论(0) 举报

Jquery Multiple load in a DIV

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间