jQuery在p内展开div [英] jQuery unwrap div within p

问题描述

我正在建立一个CMS并且有一个WYSIWYG来输入文本;但是当格式从另一个文档传递时，有时会复制一个随机< div> 。

因此，某些标准文本的HTML输出通常如下所示：

 < div class =show-文本> 
< p>在Italo Calvino 1985年的小说Palomar先生中，读者将从标题角色的角度出发，通过世俗但极具个性的思考，从着名的望远镜和天文台取名。 。 Palomar先生试图通过在他的视觉和文化环境中寻求秩序和理性来解释和定义他的存在。以小说为出发点，本次展览通过艺术家之间的密切合作和讨论得以发展，以创造艺术品之间的共生关系，其界限有时模糊不清。< / p> 
< p> Dylan Shipton的作品通过大规模的建筑干预重新塑造了空间，包括一个可以改变其他部分视图的观察结构。 Shipton的工作将作为环境框架和其他工作反应的反制点。在她的绘画实践的延伸，凯特布里格登展示了一系列釉面瓷器对象，旨在玩具有视觉和感知的想法，暗示宇宙概念。 Pippa Gatty的视频投影模拟了景观和氛围，包围和打断了物体和结构。< / p> 
< p> Palomar是从2012年诺丁汉Surface Gallery发起的项目开发的。< / p> 
< p>< div>< em>'在识别星座时，决定性的证据就是当你调用它时，看看它是如何回答& nbsp;< / em>< em>。比距离& nbsp;< / em>< em>以及配置与图表上标记的配​​置更有说服力的是& nbsp;< / em>< em>光点给予名称的回复通过它来调用它，& nbsp;< / em>< em>迅速响应这个声音，与它成为一体。'& nbsp;  - & nbsp;< / em> Mr.& ; Palomar，Italo Calvino，（Martin Secker& Warburg，1985）< / div>< / p> 
< / div> 
  

所以，我很想知道，使用jQuery，我如何解开任何不需要的< div> 在< p> 中。我认为这样可行：

  $（'。show-content-container .show-text p div'）。contents（ ）.unwrap（）; 
  

但它只是删除了div之前和之后的p。

解决方案

你的标记看起来如何：

 < p> ;< DIV> 
  

.show-text.html（）进行测试时， jQuery如何看待 ：

 < p>< / p>< div> 
  

因此，选择器永远不会按照您的意愿执行，因为任何p内部实际上都没有div。

如果你根本不想要任何div里面的.show-text，你可以使用：

<$ 。p $ p> $（ '显示文本 '）找到（' DIV'）的内容（）解开（）。;


jsFiddle这里。

I'm building a CMS and have a WYSIWYG to enter text; but as formatting is passed over from another document, you sometimes get a random <div> copied over.

So, more often than not, the HTML output for some standard text will look like:

<div class="show-text">
    <p>In Italo Calvino’s 1985 novel Mr. Palomar, the reader is taken on a journey through mundane but highly individual musings, seen from the perspective of the title character, who takes his name from the famous telescope and observatory. Mr Palomar tries to explain and define his existence by seeking order and reason in his visual and cultural surroundings. Taking the novel as a starting point, this exhibition has developed through close collaboration and discussion between the artists to create a symbiosis between the artworks, the boundaries of which are at times ambiguous.</p>
    <p>Dylan Shipton’s work re-models the space through large-scale architectural interventions, including a viewing structure that provides an altered view of the other pieces. Shipton’s work will serve as an environmental framework and counter-point for the other works to react with and against. In an extension of her painting practice, Kate Brigden is showing a series of glazed porcelain objects that aim to toy with ideas of vision and perception, suggestive of cosmic concepts. Pippa Gatty’s video projections simulate a landscape and atmosphere, enveloping and interrupting the objects and structures.</p>
    <p>Palomar is developed from a project initiated at Surface Gallery, Nottingham 2012.</p>
    <p><div><em>‘In identifying a constellation, the decisive proof is to see how it answers&nbsp;</em><em>when you call it. More convincing than the matching of distances&nbsp;</em><em>and configurations with those marked on the chart is the reply that&nbsp;</em><em>the luminous dot gives to the name by which it has been called, its&nbsp;</em><em>promptness in responding to that sound, becoming one with it.’ &nbsp;—&nbsp;</em>Mr.&nbsp;Palomar, Italo Calvino, (Martin Secker &amp; Warburg, 1985)</div></p>
</div>

So, I'm curious to know, using jQuery, how I can unwrap any unwanted <div>s within the <p>s. I thought this would work:

$('.show-content-container .show-text p div').contents().unwrap(); 

But it simply removes the p before and after the div.

解决方案

How your markup looks to you:

<p><div>

How it looks to jQuery when testing with .show-text.html():

<p></p><div>

Therefore that selector will never do as you wish as there aren't actually any div's inside any p's.

If you don't want any div's inside .show-text at all, you could just use:

$('.show-text').find('div').contents().unwrap(); 

jsFiddle here.

这篇关于jQuery在p内展开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！