使用<p>包装特定元素后面的文本

Question

我有这样的HTML：

<div class="text">
    <img src="http://placehold.it/50x50"/><a href="http://www.example.com" class="ht">the link</a>
    this element doesn't look right, the text displays next to the link
</div>
<div class="text">
    <img src="http://placehold.it/50x50"/><a href="http://www.example.com" class="ht">the link</a> 
    <p>this is a proper kind of element, i want them wrapped in paragraphs or at least looking like they've been wrapped in paragraphs</p>
</div>

我想知道是否可以从链接下面的第一个示例<div>显示文本，比如使用jQuery在文本周围包裹<p></p>。它无法更改HTML，因为它是用户生成的评论类型的项目，我无法强制用户将<p></p>放在文本周围。他们中的大多数都这样做，但有些人不这样做，所以我需要找到一个解决方案，使他们都显示相同。

我做了一些研究，我找到了这个答案：Selecting text only following certain elements using javascript/jquery 但它并没有真正回答我的问题，因为它基于特定的固定文本结构，我所拥有的文本可以是用户输入的任何内容，我需要它显示在图像和链接下方，显示在同一行。这个解决方案：Wrap text after particular symbol with jQuery对我来说也不起作用，因为我没有设置HTML来识别未包装的文本。这一个：Find text in element that is NOT wrapped in html tags and wrap it with <p>也不能满足我的需要，因为有时我们会让人们使用<b></b>和<i></i>

我尝试过的其他事情：

• 制作图片和链接包含display:block;和float:left; 不起作用，因为文本仍显示在与...相同的行上 图片和链接
• 使图片和链接没有浮动的display:block; - 不起作用，因为图像和链接不会显示在同一个上 再也不行了
• 使用$("a.ht").next()选择，但不起作用

所以，如果有人能帮我解决这个问题，我真的很感激，谢谢！

编辑：这是我想要的一个例子：

Answer 1

尝试类似：

＆＃13;

＆＃13;

$('.text').each(function() {
  var el = $(this).clone().find('img,.ht');//get the image and the title 
  var text = el.remove().end().html();//remove the elements, get the remaining html
  $(this).html(el).append('<p>' + text + '</p>');//add the p with the remaining html

});

＆＃13;

p {color:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <img src="http://placehold.it/50x50" /><a href="http://www.example.com" class="ht">the link</a>
  this element doesn't look right, the text displays next to the link
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <img src="http://placehold.it/50x50" /><a href="http://www.example.com" class="ht">the link</a>
  this element doesn't look right, the <b>text displays next</b> to the <i>link</i>
</div>

＆＃13;

＆＃13;

＆＃13;