Question

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

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

期望效果：

在：

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

#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) });

或者创建一个Element方法，例如wraps，接受Elements个实例（Fiddle）：

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

Inject new Element在第一个p之前，然后让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));

包装元素数组

3 个答案: