在各个首字母下方和列中按字母顺序排列的术语列表

时间：2020-11-19 作者：AndreaLB

我正试图打印一个列表；“品牌”；姓名按字母顺序排列在各列字母表的首字母下方。问题是，我想打印三列，里面有三个品牌，如附图所示。

<?php

$list = \'\';
$groups = array();
$tags = get_terms(\'brand\',$args);
if( $tags && is_array( $tags ) ) {
foreach( $tags as $tag ) {
  $first_letter = strtoupper( $tag->name[0] );
  $groups[ $first_letter ][] = $tag;
}
if( !empty( $groups ) ) {
  foreach( $groups as $letter => $tags ) {
    $list .= \'<div><h3>\' . $letter . \'</h3>\';
    $counterCustom = 0; //
    foreach( $tags as $tag ) {
    if ($counterCustom == 0 ) { //
        $list .= \'<div class="container"><div class="row"><div class="col-lg-4"><ul><li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    }
    if($counterCustom == 1) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 2 ) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 3 ) { //
        $list .= \'</ul></div><div class="col-lg-4"><ul><li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 4) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 5) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li></ul></div><div class="col-lg-4"><ul>\';
    } //
    elseif($counterCustom == 6) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 7) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    } //
    elseif($counterCustom == 8) { //
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li></ul></div></div></div>\';
    } //
    $counterCustom++;
      }
    $list .=\'\';
  }
}
echo $list;

?>
这就是我想做的：

enter image description here

1 个回复
最合适的回答,由SO网友:hrsetyono 整理而成

让CSS处理网格布局。

例如，使用如下标记：

<ul class="term-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
您只需使用以下CSS即可创建该布局：

.term-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: 1rem;
  grid-gap: 1rem;
}
因此，只需放弃自定义计数器，每个循环只附加<li>.

foreach( $groups as $letter => $tags ) {
    $list .= \'<div><h3>\' . $letter . \'</h3> <ul>\';

    foreach( $tags as $tag ) {
        $list .= \'<li><a href="/brand/\'.$tag->slug.\'">\'.$tag->name.\'</a></li>\';
    }
    
    $list .= \'</ul></div>\';
}

标签： order   小码农  

相关推荐

MySQL更新MENU_ORDER问题

如果post\\u类型产品没有缩略图，我正在尝试更新menu\\u顺序。。。已尝试：UPDATE phiz_posts SET menu_order = 1 WHERE ID IN (SELECT ID FROM phiz_posts LEFT JOIN phiz_postmeta ON phiz_posts.ID = phiz_postmeta.post_id AND phiz_postmeta.meta_key = \'_thumbnail_id\' WHERE post_type=\'product