在 php 中按字母顺序显示 html li 元素

Question

我有一个如下所示的 php 代码，它按列在字母表下显示项目（列表）列表（显示在下面的小提琴中）。PHP代码：if ( is_array( $beta_lists ) && ! empty( $beta_lists ) ) :    $before_title_character  = '';    echo "<pre>"; print_r($beta_lists); echo "</pre>";   // Line A    ?>    <ul id="programs-list" class="programs-list js-list-active">        <?php foreach ( $beta_lists as $title => $permalink ) :            $character_title=substr(transliterator_transliterate('Any-Latin;Latin-ASCII;', $title),0,1);             ?>            <li class="shows-list__letter">                <?php if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?>                    <h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></h1>                <?php  endif; ?>                 <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>"> <h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>                 </a>            </li>        <?php        endforeach;        ?>    </ul><?php endif; ?>我尽力在通过 php 的小提琴中复制 DOM。 https://jsfiddle.net/s4x1zf7L/3/小提琴中的 CSS 正是我目前使用的。问题陈述：尽管列表在他们的字母表下按列显示，但小提琴中的问题是，1.第二列开始将是一个不带字母的列表。（在小提琴中，学士列表从另一列开始。它应该只在第一列）2.在字母表下添加一个新列表通常会导致另一个列表在第二列的顶部被孤立。 我想知道我应该在上面的 php 代码中进行哪些更改，以便在小提琴中2 个字母应该在一列中，2 个字母在另一列中，而第二列中没有任何列表被孤立。如果我们添加 7 个（奇数）个字母，那么左列中应有 4 个字母，右列中应有 3 个字母，第二列中没有任何列表被孤立。（第二列应始终以字母开头，下面是列表。）上面 php 代码中的A 行打印了以下数组：Array(    [Apple] => http://www.abc.mno/apple/    [Ball] => http://www.abc.mno/ball/    [Builders] => http://www.abc.mno/builders/    [Bowling] => http://www.abc.mno/bowling/    [Batting] => http://www.abc.mno/batting/    [Bone] => http://www.abc.mno/bone/    [Bachelor] => http://www.abc.mno/bachelor/    [Correct] => http://www.abc.mno/correct/    [Campaign] => http://www.abc.mno/compain/    [Direct] => http://www.abc.mno/direct/    [Degree] => http://www.abc.mno/degree/)数组中元素的数量可以根据存在的值而改变这是我试过的：我尝试通过在第二列中添加边距来避免使用 css 的元素孤儿院，但每次添加新列表时，我都必须修改 css 值，我认为这不是长期解决方案。注意： DOM 不在我的控制之下。这只是我控制的 php。

Answer 1

<li>您需要删除相同字母元素之间的倍数。这是你的代码：

<li class="shows-list__letter">

  <h1 class="shows-list__letter-title">B</h1>

  <a class="shows-list__link" href="http://www.abc.mno/ball/">

     <h2 class="shows-list__title">Ball</h2>

  </a>

</li>

<li class="shows-list__letter">

  <a class="shows-list__link" href="http://www.abc.mno/builders/">

     <h2 class="shows-list__title">Builders</h2>

  </a>

</li>

...

它应该是这样的：

<li class="shows-list__letter">

  <h1 class="shows-list__letter-title">B</h1>

  <a class="shows-list__link" href="http://www.abc.mno/ball/">

     <h2 class="shows-list__title">Ball</h2>

  </a>

  <a class="shows-list__link" href="http://www.abc.mno/builders/">

     <h2 class="shows-list__title">Builders</h2>

  </a>

  <a class="shows-list__link" href="http://www.abc.mno/bowling/">

     <h2 class="shows-list__title">Bowling</h2>

  </a>

 ....

然后添加它以避免元素之间的分页符：

.shows-list__letter {

    -webkit-column-break-inside: avoid;

    page-break-inside: avoid;

    break-inside: avoid;

}

结果在这里： https: //jsfiddle.net/0ndajurv/

更新

在您的 PHP 更改中

<li class="shows-list__letter">

    <?php if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; ?>

        <h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></h1>

    <?php  endif; ?>

    <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>">

        <h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>

    </a>

</li>

和

<?php if ( $character_title !== $before_title_character ) : ?>

    <li class="shows-list__letter">

        <h1 class="shows-list__letter-title"><?php echo esc_html( $character_title ) ?></h1>

<?php  endif; ?>

        <a class="shows-list__link" href="<?php echo esc_url( $permalink ); ?>">

            <h2 class="shows-list__title"><?php echo esc_html( $title ); ?></h2>

        </a>

<?php if ( $character_title !== $before_title_character ) : 

        $before_title_character = $character_title; ?>

    </li>

<?php  endif; ?>