Smarter Ways to Generate a Deep Nested HTML Structure

Tips for efficiently generating deep nested HTML structures

Suppose we need to create the following HTML structure:

<div class="boo">
  <div class="boo">
    <div class="boo">
      <div class="boo">
        <div class="boo"></div>
      </div>
    </div>
  </div>
</div>

Writing such code manually is very cumbersome. This article is caused by the author's troubles when he sees the use of preprocessors such as Haml to generate such code.

The actual code may contain more than twenty layers of nesting, but for the sake of easy reading, we only use five layers here.

Writing each layer of nesting manually is obviously not an ideal solution, especially when HTML is generated by a preprocessor (or backend language such as JavaScript, PHP, etc.). The author himself does not like deep nesting, but when necessary, we need a scalable and easy to maintain approach.

Let's first look at some better solutions for the basic situation and its variants, and then look at some interesting effects that can be achieved with this deep nesting!

Basic Solution

We need a recursive method. For example, using Haml, the following code can be implemented:

 - def nest(cls, n)
- return '' unless n > 0
- "<div class="#{cls}"> #{nest(cls, n - 1)}</div> "
= nest('?', 5)

Emoji class names are used here, for example only. Emoji class names are not recommended in actual websites, but in other cases, moderate use can make the code more interesting.

Pug can also generate the same HTML:

 mixin nest(cls, n)
  div(class=cls)
    if --n
       nest(cls, n)

 nest('?', 5)

JavaScript Solution:

 function nest(_parent, cls, n) {
  let _el = document.createElement('div');

  if(--n) nest(_el, cls, n);

  _el.classList.add(cls);
  _parent.appendChild(_el)
};

nest(document.body, '?', 5)

PHP solution:

 <?php function nest($cls, $n) {
  echo "<div class='$cls'> ";
  if(--$n > 0) nest($cls, $n);
  echo " ";
}

nest('?', 5);
?>

It should be noted that the HTML generated by these methods is slightly different in terms of format and spaces. This means using the .?:empty selector to locate the innermost "boo" element, which works in Haml, JavaScript, and PHP generated HTML, but not in Pug generated HTML.

Add a hierarchical indicator

Suppose we want each "boo" element to have a hierarchical indicator custom property --i , which can be used to set a different background for each element.

You might think that if we just want to change the hue, we can use filter: hue-rotate() without the hierarchical indicator. However, hue-rotate() affects not only the hue, but also the saturation and brightness. It also doesn't have as flexible as custom functions relying on hierarchical indicators --i .

For example, in a recent project, I used the following code to make the background component smoothly transition between different levels ( $c value is polynomial coefficient):

 --sq: calc(var(--i)*var(--i)); /* square */
--cb: calc(var(--sq)*var(--i)); /* cube */
--hue: calc(#{$ch0} #{$ch1}*var(--i) #{$ch2}*var(--sq) #{$ch3}*var(--cb));
--sat: calc((#{$cs0} #{$cs1}*var(--i) #{$cs2}*var(--sq) #{$cs3}*var(--cb))*1%);
--lum: calc((#{$cl0} #{$cl1}*var(--i) #{$cl2}*var(--sq) #{$cl3}*var(--cb))*1%);

background: hsl(var(--hue), var(--sat), var(--lum));

Modify the Pug code to add a hierarchical indicator:

 mixin nest(cls, n, i = 0)
  div(class=cls style=`--i: ${i}`)
    if i <p> Haml version is similar:</p><pre class="brush:php;toolbar:false"> - def nest(cls, n, i = 0)
- return '' unless i  #{nest(cls, n, i 1)} "
= nest('?', 5)

JavaScript version:

 function nest(_parent, cls, n, i = 0) {
  let _el = document.createElement('div');

  _el.style.setProperty('--i', i);

  if( i <p> PHP version:</p><pre class="brush:php;toolbar:false"> <?php function nest($cls, $n, $i = 0) {
  echo "<div class='$cls' style='--i: $i'> ";
  if( $i  ";
}

nest('?', 5);
?>

...(The remaining content is similar to the original text, and can be optionally retained or rewritten as needed)

The above is the detailed content of Smarter Ways to Generate a Deep Nested HTML Structure. For more information, please follow other related articles on the PHP Chinese website!