如何在jquery中为所有子节点添加单个父元素

时间:2015-04-23 06:49:55

标签: jquery html

我有以下代码工作正常。但是,在此基础上,当单击第一个元素[节点1]时,它将被复制到目标div但没有父“UL”。直接单击子节点时也会发生同样的情况。我的意思是,如果我点击Node 1.1,Node 1.2等,那么这些应该在单个'UL'元素中捕获。即,

以下内容应改为

`<li><span>Node 1.1</span></li><li><span>Node 1.2</span></li>` 

(这就是我现在所得到的) 如

<UL><li><span>Node 1.1</span></li><li><span>Node 1.2</span></li></UL>

如果同时选择“节点1”也会发生同样的情况。

有什么想法吗?请帮忙。

http://jsfiddle.net/fjaLsnLh/7/请在此小提琴上进行修改。

3 个答案:

答案 0 :(得分:1)

使用jquery&#39; s wrapAll

$('li').wrapAll('<ul></ul>');

jsfiddle:http://jsfiddle.net/fjaLsnLh/12/

答案 1 :(得分:0)

您可以使用jquery方法wrapAll()来实现此目的。

语法:

$(selector).wrapAll(wrappingElement);
$('li').wrapAll('<ul></ul>');

例如:

&#13;
&#13;
$(document).ready(function() {
  $("button").click(function() {
    $("li").wrapAll("<ul></ul>");
  });
});
&#13;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<body>

  <UL>
    <li><span>Node 1.1</span>
    </li>
    <li><span>Node 1.2</span>
    </li>
  </UL>
  <button>Wrap a div element around all p elements</button>

</body>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

只需将<li>s直接添加到<ul>,而不是<div>。不需要包装等......

http://jsfiddle.net/fjaLsnLh/11/