Удалите все теги абзаца, у которых есть потомок img, но не удаляйте img

Question

Я работаю с CMS (ExpressionEngine), который оборачивает теги абзаца вокруг изображений. Я использую адаптивные изображения (max-width: 100%), и поскольку я также определяю ширину в своих абзацах, это вызывает проблемы. Я хотел бы использовать jQuery для удаления тегов абзаца, которые обернуты вокруг изображений. Я также хотел бы иметь возможность удалять свойства width и height из изображений, так как они не нужны в сочетании с 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');
});

украли последний бит сверху