Question

我有一个通过CKEditor输出的网页。我需要它来显示没有标签的图像，但是我需要它来保留段落标签中的实际文本，以便我可以将其作为样式进行定位。

我已经尝试通过下面的jQuery实现这一点，我在另一篇文章中找到了它，但它并不适合我...

我试过了：

$('img').unwrap();

我尝试过：

$('p > *').unwrap();

这两项都不起作用。我可以从我的编辑器配置中完全禁用这些标签，但如果它没有包含在标签中，我将无法将其上的文本作为目标。

输出的HTML是：

<body>
<div id="container" class="container">
<p><img alt="" src="http://localhost/integrated/uploads/images/roast-dinner-main-xlarge%281%29.jpg" style="height:300px; width:400px" /></p><p>Our roast dinners are buy one get one free!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p > *').unwrap();
});
</script>
</body>

感谢所有帮助！

Answer 1

通常使用

完成

$('img').unwrap("p");

但这也会从它的父母（包含图片）中孤立任何其他内容（如文字）。

所以基本上你想将图像移出标签您可以在两个地方移动图片：之前或之后 p标记：

＆＃13;

$("p:has(img)").before(function() { // or use .after()
  return $(this).find("img");
});

＆＃13;

p {
  background: red;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container" class="container">
  <p>
    <img alt="" src="http://placehold.it/50x50/f0b" />
  </p>
  <p>
    Our roast dinners are buy one get one free!
  </p>
</div>

<p>
  <img src="http://placehold.it/50x50/f0b" alt="">
  Lorem ipsum dolor ay ay
  <img src="http://placehold.it/50x50/0bf" alt="">
</p>

<p>
  <img src="http://placehold.it/50x50/0bf" alt="">
</p>

＆＃13;

虽然注意到以上内容不会删除我们留下的空标签。 See here how to remove empty p tags

解决方法

如果你想删除空段落 - 如果图片是唯一的孩子 -
并保留包含图像和其他内容的段落：

＆＃13;

$("p:has(img)").each(function() {
    $(this).before( $(this).find("img") );
    if(!$.trim(this.innerHTML).length) $(this).remove();
});

＆＃13;

p{
  background:red;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
  <p>
    <img alt="" src="http://placehold.it/50x50/f0b" />
  </p>
  <p>
    Our roast dinners are buy one get one free!
  </p>
</div>

<p>
  <img src="http://placehold.it/50x50/f0b" alt="">
  Lorem ipsum dolor ay ay
  <img src="http://placehold.it/50x50/0bf" alt="">
</p>

<p>
  <img src="http://placehold.it/50x50/0bf" alt="">
</p>

＆＃13;

Answer 2

这肯定会有用

var par = $(".par");
var tmp = par.find('.img').clone();
var parent = par.parent();
par.remove();
tmp.appendTo(parent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
	<p class="par">
		<img src="https://webkit.org/demos/srcset/image-src.png" class="img" alt="">
	</p>
</div>

如何使用jQuery删除img周围的P标签？

2 个答案:

解决方法