Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrapping an array of elements

I'm trying to write an unobtrusive script and I don't want to add any html that's not needed unless javascript is enabled.

Using MooTools 1.2.4, is it possible to wrap a an array of elements with say for example: tags?

Desired effect:

Before:

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

Wishful thinking javascript code:

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

After:

<div id="master">
  <p>Something</p>
  <p>Something1</p>
  <p>Something2</p>
  <p>Something3</p>
</div>
like image 683
fivetwentysix Avatar asked Dec 28 '10 05:12

fivetwentysix


1 Answers

Answered on the IRC channel. Answer added for posterity.

Iterate over the elements and use wraps (Fiddle):

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

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

Or create an Element method like wraps that accepts Elements instances (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'));
like image 133
Mark Keeto Obcena Avatar answered Oct 05 '22 23:10

Mark Keeto Obcena