Question

How can I slice elements with mootools?
for example I want to inject “</ul><ul>” (not<ul></ul>) before all “li” that have a “span” child.
source code:

<ul>

   <li>
       <a></a>
   </li>

   <li>
       <a></a>
   </li>
<!-- i want insert "</ul><ul>" Here -->
   <li> 
       <span></span>
   </li>

   <li>
      <a></a>
   </li>

   <li>
     <a></a>
   </li>

   <li>
     <a></a>
   </li>

<!-- i want insert "</ul><ul>" Here--> 
   <li>
      <span></span>
   </li>

   <li>
      <a></a>
   </li>

   <li>
      <a></a>
   </li>

</ul>

output :

<ul>

       <li>
           <a></a>
       </li>

       <li>
           <a></a>
       </li>
</ul>

<ul>
       <li> 
           <span></span>
       </li>

       <li>
          <a></a>
       </li>

       <li>
         <a></a>
       </li>

       <li>
         <a></a>
       </li>

</ul>

<ul>
       <li>
          <span></span>
       </li>

       <li>
          <a></a>
       </li>

       <li>
          <a></a>
       </li>

    </ul>

Thanks for any help

Answer 1

Here would be a possible implementation of a slice function for the mootools Element class:

Element.implement({
    'slice' : function(keys) {
        var keys = Array.from(keys),
            newParent = false;
        this.getChildren().each(function(child) {
            if(keys.contains(child)) {
                newParent = new Element(this.get("tag"))
                    .inject(newParent?newParent:this, "after");
            }
            if(newParent) 
                newParent.adopt(child);

        }, this);
    }
});
window.addEvent("domready", function() {
    $("toSlice").slice($$(".keyElt"));
});

and its jsfiddle :
http://jsfiddle.net/cFukg/1/