JQuery将一个div的开头添加到元素，然后在不同的元素之后关闭div

Question

我查看了 jquery 文档，我尝试过的每个示例都给我带来了问题。我有一堆不同类的列表项，我只想在一个特定的 li 项之前添加一个 div () 。

然后我想定位一个不同的列表项并添加一个结束 div ()。

当我尝试使用 prependTo 和 append 等但它们都没有工作时，它们会自动关闭我打开的 div。到目前为止，我的代码如下所示：

<ul>
<li class="textbox email">This is the email list item</li>
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</ul>

我希望它的出现是：

<ul>
<li class="textbox email">This is the email list item</li>
<div class="open"> <!-- div id opened here -->
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</div> <!-- div is closed here -->
</ul>

目前，如果我尝试：

 $("<div>").prependTo(".email");//prependTo append at inside top

输出会像这样自动关闭div：

<ul>
<div></div> <!-- div closed automatically instead of remaining open -->
<li class="textbox email">This is the email list item</li>
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</ul>

Answer 1

有使用 HTML 包装 div 的示例

<div class="container">
 <div class="selector">Hello</div>
 </div>

JS 是

$( ".selector" ).wrap( "<div class='yourClass'></div>" );

和 HTML 将被更改为

 <div class="container">
  <div class='yourClass'>
   <div class="selector">Hello</div>
  </div>
 </div>

Answer 2

Garry，抱歉，你弄错了。

您的解决方案$(".email").after("<ul>").nextAll("li").appendTo($(".email").next()); 创建无效标记：

<ul>
    <li class="textbox email">This is the email list item</li>
    <ul>
        <li class="textbox address">This is the address list item</li>
        <li class="textbox aboutme">This is the aboutme list item</li>
    </ul>
</ul>

因为ul 元素只能包含子li 元素。在这种情况下，外部ul 有一个li 和一个ul 子级，这在语义上是无效的。

---

你想要的是这个：

<ul>
    <li class="textbox email">This is the email list item
        <ul>
            <li class="textbox address">This is the address list item</li>
            <li class="textbox aboutme">This is the aboutme list item</li>
        </ul>
    </li>
</ul>

这是有效标记，因为两个ul 元素都只有li 子元素，而li 可以在其中包含其他ul。换句话说，外部ul 只有一个子级（电子邮件），其中包含另一个ul 列表。

所以，上面生成有效标记的代码是

// get the .address and .aboutme and wrap a UL around these two LIs
$(".email").nextAll("li").wrapAll("<ul class='open'>"); 

// move the recently created UL.open to the .email
$(".email").append($(".open"));

或者，如果您更喜欢一个陈述，可以这样：

$(".email").nextAll("li").wrapAll("<ul class='open'>").parent().prev(".email").append($(".open"));

Answer 3

您正在尝试创建无效的 html，但是如果您真的想要，您需要将 <li> 元素移动到 div 中，而不是添加开始和结束标记。然而，由于 html 的无效性质，跨浏览器可能存在一些不一致的行为。

Answer 4

你要知道，这些jQuery append和prepend都是作用在DOM树上的操作，所以不能简单地这样修改。

同样将<div> 放入<ul> 是错误的。

请写下你想要达到的目标，也许可以通过其他方式完成。

Answer 5

编辑：这个答案很旧，小提琴坏了。请在下面使用 Gautum 的答案 (https://stackoverflow.com/a/26014879/1139444)

---

正如已经说过的那样，这不是一个好主意，但这里有一个演示如何使用 jQuery 进行操作。

jsFiddle

从代码中可以看出，它会插入div，然后将li 添加到创建的div 中。您现在需要的是在addClass 中添加另一行，以便div 具有open 类。