Question

我正在使用CMS（ExpressionEngine）来包装图像周围的段落标记。我正在使用响应式图像（最大宽度：100％），因为我也在我的段落上定义宽度，这会导致问题。我想使用jQuery删除包围图像的段落标记。我也希望能够从图像中删除宽度和高度属性，因为这些不需要与max-width结合使用：100％。

以下是修改前的HTML示例：

<div class="content">
<p>Hello! This is text content in a blog post.</p>
<p><img src="hello.jpg" width="300" height="300" alt="Hello!" /></p>
<p>This is more text content in the blog pst.</p>
</div>

......这就是我想要的结果：

<div class="content">
<p>Hello! This is text content in a blog post.</p>
<img src="hello.jpg" alt="Hello!" />
<p>This is more text content in the blog pst.</p>
</div>

我可以将ExpressionEngine的字段格式从“XHTML”更改为“none”，但这需要发布内容的人写HTML，我宁愿避免。谢谢你的帮助！

Answer 1

这应该做你想要的：

$('p > img').removeAttr('height').removeAttr('width').unwrap();

这适用于<img>包含的<a>：

$('p > a > img').removeAttr('height').removeAttr('width').parent().unwrap();

Answer 2

您可以使用.unwrap()删除封闭节点，使用removeAttr()删除属性...

$('.content > p > img').unwrap()
                       .removeAttr('width height')

Answer 3

你可以使用jQuery.unwrap并重置高度/宽度：

$('p > img').each(function() {
  $(this).unwrap();
  this.height = '';
  this.width = '';
});

Answer 4

使用选择器查找包含图像的p标签，然后拉出该节点并将其放回原位：

var $img = $('p').find('img');
$img.parent().replaceWith($img);
$img.css('height','');
$img.css('width','');

这是未经测试的，所以我不完全确定逻辑是否正确，但这些是你想要使用的基本功能/流程。

Answer 5

你可以尝试这样的事情：

$('p + img').replaceWith(function() {
  return $(this).contents().removeAttr('width height');
});

从上面偷走了最后一位

删除任何具有img子项的段落标记，但不要删除img

5 个答案: