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

只是包装没有包装的元素

1 个答案: