在 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.第二列开始将列出不带字母表的列表。(在小提琴中，学士列表从另一列开始。它应该只在第 1 列中(

2.在字母表下添加新列表通常会导致在第二列顶部孤立另一个列表。

我想知道我应该在上面的 php 代码中进行哪些更改，以便在小提琴中 2 个字母应该在一列中，2 个字母应该在另一列中，而没有在第二列中孤立的任何列表。

如果我们添加 7(奇数(个字母，那么左列应该有 4 个字母，右列应该有 3 个字母，而第二列中没有任何孤立的列表。

(第 2 列应始终以字母开头，其下方有列表。

上面 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; ?>