在 php 中的字母下按列显示 html li 元素

Posted 2023-03-05

【中文标题】在 php 中的字母下按列显示 html li 元素

【英文标题】：display html li elements column-wise under their alphabets in php

【发布时间】：2020-08-28 15:58:20

【问题描述】：

我有一个如下所示的 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 正是我目前正在使用的。

问题陈述：

虽然列表在其字母表下按列显示，但fiddle 中的问题是，

1.第二列开始是一个没有字母的列表。 （在fiddle，Bachelor列表从另一列开始。它应该只在第一列）

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

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

如果我们添加 7 个（奇数）个字母，那么 4 个字母应该在左列，3 个字母应该在右列，没有任何列表在第 2 列被孤立。

（第 2 列应始终以字母开头，并在其下方列出。）

上面 php 代码中的

Line 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。

【参考方案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; ?>

【讨论】：

嗨，DOM 不在我的控制范围内。它是我控制的php。 DOM 是通过 php 创建的。我想知道您是否可以给我一个提示，我需要在 php 代码中进行哪些更改才能实现这一点。

把<li ..>和</li>放在if里面。如果字母相同（A、B、C），则不要创建新的<li> 元素。当字母发生变化时，您就创建它。

我想知道是否可以将if ( $character_title !== $before_title_character ) : $before_title_character = $character_title; 放在<li> 的开头。

有可能。尝试一下，然后检查结果。最终的 HTML 是我在答案中添加的。

我试过了，它只是在字母表下只拉出一个列表。不知道为什么会这样。字母表下有多个项目。