gpt4 book ai didi

php - 如何使用 jQuery 删除 img 周围的 P 标签?

转载 作者:行者123 更新时间:2023-11-27 23:15:56 26 4
gpt4 key购买 nike

我有一个通过 CKEditor 输出的网页。我需要它来显示没有 <p></p> 的图像标签,但我需要它在段落标签中保留实际文本,以便我可以针对它进行样式设置。

我试图通过我在另一篇文章中找到的下面的 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>

感谢所有帮助!

最佳答案

通常使用

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

但是这也会从它的 <p> 中孤立任何其他内容(如文本)父级(包含图像)。

所以基本上你想将图像移出 <p>标签。
您可以将图像移动到两个位置:之前之后 p标签:

$("p:has(img)").before(function() { // or use .after()
return $(this).find("img");
});
p {
background: red;
padding: 10px;
}
<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>

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

补救措施

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

$("p:has(img)").each(function() {
$(this).before( $(this).find("img") );
if(!$.trim(this.innerHTML).length) $(this).remove();
});
p{
background:red;
padding: 10px;
}
<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>

关于php - 如何使用 jQuery 删除 img 周围的 P 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43204996/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com