jQuery 将元素放在 div 中答案

【问题标题】：Jquery put elements in divjQuery 将元素放在 div 中
【发布时间】：2021-12-29 20:06:21
【问题描述】：

您需要将项目放在一个 div 中 - <div style = 'flex-direction: column;'>。

Div需要在p和id = "billing_city_field"之后创建并在p 和id = "apartment_field" 之后关闭。尝试使用此功能：

 jQuery (document) .ready (function ($) {
     $ ("# billing_city_field"). after ("<div style = 'flex-direction: column;'>");
     $ ("# apartment_field"). after ("</ div");
 });

但是 div 立即关闭。我该怎么办？

【问题讨论】：

没有</div> 元素这样的东西。您正在对 DOM 元素进行操作，而不是 HTML 文本。
所以当你添加<div>时，它会自动关闭，你不需要显式添加</div>。
这是正确的行为。要达到您的目标，您必须将#appartment_field 移动到您刚刚创建的 div 中。为此，首先创建带有一些 ID 的 div。并使用 jquery append() 函数移动。

标签： javascript html jquery css

【解决方案1】：

问题是因为您不能单独附加开始/结束标签。 DOM 将元素作为一个整体工作，因此您需要在一次操作中创建整个 div 元素。

鉴于您对目标的描述，您似乎正在尝试将现有内容包装在新的 div 中。因此，您可以使用nextUntil()（假设目标元素是兄弟元素），然后使用wrapAll()。试试这个：

jQuery($ => {
  let $contents = $("#billing_city_field").nextUntil('#apartment_field').add('#apartment_field');
  $contents.wrapAll('<div class="column" />');
});

注意上例中使用了class 属性，而不是应用内联style 规则。

【讨论】：

感谢您的回复。但我需要所有元素 1 个 div，而不是每个元素 1 个 div
那么你可以使用wrapAll()。我为您更新了答案中的示例

【解决方案2】：

问题不是很清楚，但据我所知。我认为您对 .after 对 jQuery 的作用有一点误解。在这种情况下，之后是“结构”而不是“时间”相关。如果您检查 jQuery 文档 (https://api.jquery.com/after/)，您基本上可以看到您需要做什么。

执行此操作的最简单方法，例如，如果这些东西需要创建并且在 body 上尚不存在。

$(function(){
   var p = $("<p id='apartment_field'>Paragraph test</p>");
   $("body").append("<div id='billing_city_field' style='flex-direction: column;'></div>");
   $("#billing_city_field").html(p);
});

我添加了Paragraph test，所以结果更容易看到。

还有一件事，不确定复制/粘贴是否出错，但请确保 # 和 id 之间没有这样的空格。

$("#billing_city_field")
$("#apartment_field")

编辑：看看 cmets 可能是这样的，如果它们已经存在的话？你应该进一步澄清这个问题。

$("#billing_city_field").append($("#apartment_field").detach());

【讨论】：