javascript - 只包装没有被包装的元素

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 将在每次加载下一页时添加，因此如果假设第一页上的帖子图像已被 span 包裹，则使用 jquery wrap，然后在加载第二页时，帖子图像将被包裹在“加载函数”的范围内，但也会重复包裹第一页上的图像，依此类推

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