jQuery在元素中添加div的打开,然后在不同的元素之后关闭div

ebdffaop  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(140)

我看过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>

f5emj3cl

f5emj3cl1#

加里,对不起,你搞错了。
您的解决方案$(".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列表的子列表(email)。
因此,生成上述有效标记的代码是

// 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"));

n1bvdmb6

n1bvdmb62#

有一个使用HTML Package 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>

wpcxdonn

wpcxdonn3#

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

92vpleto

92vpleto4#

你必须知道这些jQuery append和prepend是在DOM树上工作的操作,所以你不能简单地用那种方式修改它。
<div>放在<ul>里面也是错误的。
请写下你想达到的目标,也许可以用其他方法。

gpfsuwkq

gpfsuwkq5#

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

正如已经说过的,这不是一个好主意,但这里有一个关于如何使用jQuery做i的演示。
jsFiddle
从代码中可以看到,它插入了div,然后将li添加到创建的div中。现在只需要在addClass中添加另一行,使div具有open类。

相关问题