在php中按字母顺序显示html li元素 [英] display html li elements column-wise under their alphabets in php

问题描述

我有一个如下所示的php代码，该代码以列的字母顺序显示项目列表(列表)(在下面的小提琴中显示).

I have a php code as shown below which displays list of items (listings) under their alphabets column-wise (show in the fiddle below).

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正是我目前正在使用.

I tried my best to replicate the DOM in the fiddle coming through php. https://jsfiddle.net/s4x1zf7L/3/ The CSS present in the fiddle is exactly what I am using currently.

问题陈述:

尽管列表按字母顺序显示，但是小提琴中的问题是，

Although list is displaying column-wise under their alphabets, the issue in the fiddle is that,

1..第二列开始将列出不带字母的列表. (在小提琴中，单身汉列表从另一列开始.它应该仅在第一列中

1. The 2nd column starts will a listing not with an alphabet. (In the fiddle, Bachelor listing starts from another column. It should be in 1st column only)

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

2. Adding a new list under alphabets often results another list being orphaned at the top of the 2nd column. 

我想知道我应该在上面的php代码中进行哪些更改，以便在 fiddle 2个字母应位于一列，而 2个字母应位于另一列 在第二列中所有孤立的列表.

I am wondering what changes I should make in the php code above so that in the fiddle 2 alphabets should be in one column and 2 alphabets in another without any list being orphaned in the 2nd column.

如果我们添加7个(奇数)个字母，则左列应为4个字母，右列应为3个字母，第二列中不孤立任何列表.

In case if we add 7 (odd) number of alphabets then 4 alphabets should be in left column and 3 alphabets should be in right column without any list being orphaned in the 2nd column.

(第二列应始终以字母开头，并在其下方列出.)

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/
)

数组中的元素数量可以根据presen值而改变

The number of elements in the array can change depending upon the values presen

这是我尝试过的:

我试图通过在第二列中添加边距来避免使用css元素的孤立现象，但是每次添加新列表时，我都必须修改css值，我相信 这不是一个长期的解决方案.

I tried avoiding orphanage of elements using css by adding margin in the 2nd column but everytime when new list gets added, I have to modify the css values which I believe is not a long term solution.

注意:DOM不在我的控制范围内.这只是由我控制的php.

Note: The DOM is not in my control. It's only the php which is in my control.

推荐答案

您需要删除同一字母元素之间的倍数<li>. 这是您的代码:

You need to remove the multiples <li> between the same letter elements. This is your code:

<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>
 ....

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

and then add this to avoid page break between the elements:

.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; ?>

这篇关于在php中按字母顺序显示html li元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！