只包裹尚未包裹的元素

Question

我已经用 jquery wrap 函数包装了 img 元素。

$('.post').each(function(){
   $(this).find('img').wrap('<span/>');
};

HTML

<div id ='post1' class='post'>
   aaaaaaaa aaaaaaa
   **<span>**<img/>**</span>**
   aaaaaaaa aaaaaaa
</div>

通过无限滚动加载更多页面后，这不起作用。所以我必须添加以下脚本

$(document).on('load resize', function){

   $('.post').each(function(){
      $(this).find('img').wrap('<span/>');

   });
});

但是 span 会在每次加载下一页时添加，所以如果假设第一页上的帖子图像已经用 jquery wrap span 包裹，然后在加载第二页时，将使用“on load function”的跨度包裹帖子图像，但也会重复将图像包裹在第一页上，依此类推

<div id ='post1' class='post'>
   bbbbbb bbbbbb
   <span><span><span><img/><span><span></span>
   bbbbbb bbbbbb
</div>

Load page 2...

<div id ='post2' class='post'>
   aaaaaaaa aaaaaaa
   <span><span><img/><span></span>
   aaaaaaaa aaaaaaa
</div>

load page 3...

<div id ='post3' class='post'>
   cccccc cccccc
   <span><img/><span>
   cccccc cccccc
</div>

我只想在加载更多页面后包装没有被'span'包装的img元素。我该怎么办？

Answer 1

在帖子中添加一个类，告诉脚本它已经被处理过：

$(document).on('load resize', function){
    $('.post:not(.wrapped)').each(function(){
        $(this).addClass("wrapped").find('img').wrap('<span/>');
    });
});