jquery - 将 div 类父级添加到 img 和 iframe，但块引用除外

Question

我正在使用这些 jQuery 片段：

$(".post img").each(function(){ $(this).wrap('<div class="fwparent" />'); });
$(".post iframe").each(function(){ $(this).wrap('<div class="fwparent" />'); });

用 fwparent div 类包装我的图像和 iframe。但现在我需要他们为块引用做例外。

现在看起来像这样：

<div class="post">
...
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
...
<blockquote>
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
</blockquote>
...
</div>

但我希望它看起来像这样：

<div class="post">
...
<div class="fwparent"><img src="image.png"></div>
<div class="fwparent"><iframe src="movie"></div>
...
<blockquote>
<img src="image.png">
<iframe src="movie">
</blockquote>
...
</div>

有谁知道如何实现这一目标？

Answer 1

你可以试试这段代码：

$(".post img, .post iframe").each(function(){
    if ($(this).parent().prop('tagName') != 'BLOCKQUOTE') {
        $(this).wrap('<div class="fwparent" />');
    }
});

代码检查当前元素的父元素是否是块引用，如果不是，则包装该元素。该代码也使用prop 方法。

Answer 2

你可以试一试：

$(".post > img").each(function(){ $(this).wrap('<div class="fwparent" />'); });
$(".post > iframe").each(function(){ $(this).wrap('<div class="fwparent" />'); });

或更短的版本：

$(".post > img, .post > iframe").each(function(){ 
   $(this).wrap('<div class="fwparent" />'); 
});