包装元素数组

Question

我正在尝试编写一个不起眼的脚本，我不想添加任何不需要的html，除非启用了javascript。

使用MooTools 1.2.4，是否可以用例如: tags来包装一个元素数组？

预期效果：

之前：

<p>Something</p>
<p>Something1</p>
<p>Something2</p>
<p>Something3</p>

如意算盘javascript代码：

$$('p').wrapWith(new Element('div', {id: 'master'}));

之后：

<div id="master">
  <p>Something</p>
  <p>Something1</p>
  <p>Something2</p>
  <p>Something3</p>
</div>

Answer 1

在IRC通道上应答。为子孙后代添加答案。

迭代元素并使用wraps (Fiddle)：

var els = $$('p'),
    div = new Element('div', {id: 'master'});

els.each(function(e){ div.wraps(e) });

或者创建一个接受Elements实例(Fiddle)的Element方法(如wraps )：

Element.implement('surround', function(els, where){
    var elements = Array.slice(els), len = elements.length;
    for (var i = 0; i < len; i++){
        this.wraps(elements[i], where);
    }
    return this;
});

new Element('div', {id: 'master'}).surround($$('p'));

Answer 2

这似乎起作用了：

示例： http://jsfiddle.net/9Pqv9/

var p = $$('p');
new Element('div',{id:'master'}).inject(p[0],'before').adopt(p);

在第一个p之前Inject new Element，然后让它adopt整个p元素集。

或者这个，wraps第一个p，然后采用这个集合：

示例： http://jsfiddle.net/9Pqv9/1/

var p = $$('p');
new Element('div', {id: 'master'}).wraps(p[0]).adopt(p);

Answer 3

我喜欢keeto的例子。这里有一个不同的解决方案：

var div = new Element('div', {id: 'master'}); 
div.inject(document.body);
$$('p').inject(div);

http://jsfiddle.net/tofu/9wPp5/5/

或者在MooTools 1.3中使用一行程序

$$('p').inject(new Element('div#master').inject(document.body));