split <ul> to two <ul>s in Tritium

Question

I have a long ul where the number of li's are not constant

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

and I want to split this into two ul's using Moovweb SDK.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Is there a way to do this with Tritium?

Answer 1

I recently came across a similar issue where I wanted to split a ul into half.

Here's what I did:

html_fragment() {
  $("./ul") {
    $("./li[position() mod 2 = 1]") {
      $middle = index()
    }
    $("./li["+$middle+"]/following-sibling::li[1]") {
      wrap("ul", class: "mw-second-ul") {
        move_here("./following-sibling::li")
        move_to("parent::ul", "after")
      }
    }
    attributes(class: "mw-first-ul")
  }
}

Here's the tritium tester url: http://tritium.moovweb.com/86d868527a73a1648ad2f77fa97685ac56970d2c