Question

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

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

当我尝试使用prependTo并附加等但它们都没有工作，因为它们会自动关闭我打开的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将更改为AS

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

Answer 2

加里，对不起，但你弄错了。

您的解决方案$(".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追加和前置是在DOM树上运行的操作，所以你不能简单地以这种方式修改它。

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

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

Answer 5

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

正如已经说过这不是一个好主意，但这里有一个关于如何用jQuery做的演示。

jsFiddle

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

JQuery在元素中添加div的开头，然后在不同元素之后关闭div

5 个答案: