简体   繁体   English

jQuery使用.load()来追加数据而不是替换

[英]jQuery use .load() to append data instead of replace

how can i have the functionality of load() except i want to append data instead of replace. 我怎么能有load()的功能,除了我想附加数据而不是替换。 maybe i can use get() instead but i want to just extract the #posts element from the loaded data 也许我可以使用get()代替,但我想从加载的数据中提取#posts元素


UPDATE UPDATE

when i do an alert(data) i get ... 当我做alert(data)我得到...

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery.infinitescroll.js"></script>
  <script>

  </script>
</head>
<body>
  <div id="info"></div>
  <div id="posts">
    <div class="post"> ... </div> 
    ...
  <ul id="pageNav" class="clearfix">
    <li><a href="page1.html">1</a></li>
    <li><a href="page2.html">2</a></li>
    <li><a href="page3.html">3</a></li>
    <li><a href="page4.html">4</a></li>
    <li><a href="page5.html">5</a></li>
    <li><a href="page3.html" class="next">next</a></li>  
  </ul>

the full code can be found @ pastebin 完整的代码可以在@ pastebin找到

There's no reason you can't extract the element you want using $.get() . 没有理由你不能使用$.get()提取你想要的元素。

$.get('test.html',function(data) {
    var posts = $(data).find('#posts');
       // If the #posts element is at the top level of the data,
       //    you'll need to use .filter() instead.
       // var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

EDIT: 编辑:

You perhaps didn't notice the code comments above, so I'm going to make it more explicit here. 您可能没有注意到上面的代码注释,所以我将在这里更明确地说明。

If the #posts element is at the top of the hierarchy in data , in other words if it doesn't have a parent element, you'll need to use .filter() instead. 如果#posts元素位于data层次结构的顶部,换句话说,如果它没有父元素,则需要使用.filter()

$.get('test.html',function(data) {
    var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

EDIT: 编辑:

Based on the comments below, you seem to need .filter() instead of .find() . 根据下面的评论,您似乎需要.filter()而不是.find()

The reason is that you're passing in an entire HTML structure. 原因是你传递的是整个HTML结构。 When you do that, jQuery places the direct children of the body tag as the array in the jQuery object. 当你这样做时,jQuery将body标签的直接子节点作为jQuery对象中的数组。

jQuery's .filter() filters against only the nodes in that array. jQuery的.filter()仅针对该数组中的节点进行过滤。 Not their children. 不是他们的孩子。

jQuery's .find() searches among the descendants of the nodes in the array. jQuery的.find()搜索数组中节点的后代

Because of this, you're needing to use both. 因此,您需要同时使用它们。 .filter() to get the correct one at the top ( #posts ) and .find() to get the correct descendant ( .next ). .filter()在顶部获取正确的( #posts )和.find()以获得正确的后代( .next )。

$(data).filter('#posts').find('.next');

This narrows the set down to only the #posts element, then finds the .next element that is a descendant. #posts设置缩小为仅仅#posts元素,然后查找作为后代的.next元素。

To append using load: 要使用load附加:

jQuery('#Posts').append( jQuery('<div>').load(...) );

This will append whatever you load into the #Posts element. 这会将你加载的任何内容附加到#Posts元素中。

$.get("YadaYadaYada.php", function(dat) {
   $(dat).find("body > #posts").appendTo("#container");
});

try use $(this), something like : 尝试使用$(this),类似于:

<div id="result">Hello World </div>
    <script>
    $(function() {
            $(this).load('templates/test2.html', function(result) {
                $('#result').append(result);
            });
        });
    </script>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM