将元素和内容包装到div中

Question

我正在从另一个站点请求数据（使用jQuery load()函数）到我的<div class="ajax-container">以显示收集的数据。 数据带有元素和内容（只有文本，例如“ born 2007”）。 我试图用jQuery wrap()和wrapAll方法包装它们，但是包装不正确。 因此，我想将所有元素和内容包装到一个div以便更轻松地设置样式。

我该如何实现？ 我需要包装所有东西，直到找到某个class 。 我也尝试了jQuery parentsUntil()方法，但是那也不起作用。 我不知道如何实现这一目标，因此需要您的帮助。

示例数据（打印到我的页面的html）：

<div class="container">
    <b class="big_text">Title</b>
    "some content after title&nbsp;"
    <b>Subtitle content here</b>
    <br />
    <span class="no-wrap"><b>Price</b></span>
    <br />
    "made in 2007"
    <div class="picture">
        ...
    </div>
</div>

这就是问题所在，我必须将所有内容包装到div直到出现<div class="picture"> 。

这不起作用：

 $(".container").children().nextUntil(".picture").wrapAll("<div></div>");

这将是理想的结果：

<div class="container">
<div class="content">
    <b class="big_text">Title</b>
    "some content after title&nbsp;"
    <b>Subtitle content here</b>
    <br />
    <span class="no-wrap"><b>Price</b></span>
    <br />
    "made in 2007"
</div>
<div class="picture">
    ...
</div>

Answer 1

我相信最好的方法是包装内部内容然后移动“图片”：

 $(document).ready(function(){ $(".container").wrapInner("<div></div>"); $(".container").append($(".container .picture")); }) 

 .container > div ~ .picture {color:red;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <b class="big_text">Title</b> "some content after title&nbsp;" <b>Subtitle content here</b> <br /> <span class="no-wrap"><b>Price</b></span> <br /> "made in 2007" <div class="picture"> ... </div> </div>