html - Tritium では、既存の要素のコンテンツに基づいて要素を挿入するにはどうすればよいですか?

Question

新しい要素を挿入したいのですが、特定の要素の間に挿入する必要があります。これらの要素を区別する唯一の方法は、その内容です。

このリストをアルファベット順に分割するヘッダー要素を挿入したいと思います。これどうやってするの？

<p>Aardvark</p>
<p>Alligator</p>
<p>Bear</p>
<p>Beaver</p>
<p>Cat</p>
<p>Cow</p>
...

Answer 1

よし、今すぐいくつかの重大なコードを完成させましょう。

これをダイナミックにしようと思います！

$letter = ''
$("//p[not(contains(@class,'starts-with'))][1]") {
  # get the first p that doesn't have the class
  $add_header = "false"
  text() {
    capture(/\A(\w)/) {
      # get the first letter and set it to a variable 
      match($letter) {
        with($1) {
          #do nothing
        }
        else() {
          $letter = $1
          $add_header = "true"
        }
      }
    }
  }
  match($add_header) {
    with(/true/) {
      insert_before("h1", "Starts With: "+$letter)
      $("self::*|following-sibling::p[contains(text(), '"+$letter+"')]") {
        add_class("starts-with-" + $letter)
      }
    }
  }
}

Answer 2

これを試してみてください。要素が最初の文字でグループ化されていなくても、どのリストでも機能します。

$add_header = "true"
text() {
  replace(/^(.)/) {
    $first_letter = $1
  }
}

# If the header section already exists, move this element inside
move_to("preceding-sibling::div[@class='starts-with-"+$first_letter+"']") {
  $add_header = "false" 
}

# If the header section doesn't exist, wrap the element 
match($add_header, /true/) {
  wrap("div") {
    add_class("starts-with-" + $1)
  }
}

これを関数にラップするのはかなり簡単です。この後、書き込む次の論理関数はアルファベット順であり、 $first_letter を使用して、見つかった文字の小文字と大文字の両方のバージョンに一致させます。