时间戳

首页 > 解决方案 > 如何通过字母表后面的起始字母来划分 ul

php - 如何通过字母表后面的起始字母来划分 ul

问题描述

我有一个项目列表，我想将其分成几个列表，每个列表都以字母表字母后面的标题开头。

因此，以此为起点：

<ul>
  <li>A item #1</li>
  <li>A item #2</li>
  <li>A item #3</li>
  <li>B item #4</li>
  <li>B item #5</li>
  <li>B item #6</li>
  <li>C item #7</li>
  <li>C item #8</li>
  <li>C item #9</li>
</ul>

我想实现这一点：

<h2>A</h2>
<ul>
  <li>A item #1</li>
  <li>A item #2</li>
  <li>A item #3</li>
</ul>

<h2>B</h2>
<ul>
  <li>B item #4</li>
  <li>B item #5</li>
  <li>B item #6</li>
</ul>

<h2>C</h2>
<ul>
  <li>C item #7</li>
  <li>C item #8</li>
  <li>C item #9</li>
</ul>

我对 PHP 解决方案或 JS 解决方案同样感兴趣。

****** 这是源 PHP 代码，一个直接的 WP 循环 ******

<!-- The loop START -->
<?php
global $query_string; // required
$posts = query_posts($query_string."&orderby=title&order=ASC");

if ( have_posts() ) { ?>

  <ul>
    <?php
    while ( have_posts() ) {
      the_post(); ?>

        <a href="<?php the_permalink(); ?>">
          <li>
            <?php the_title(); ?>
          </li>
        </a>

    <?php } // end while ?>
  </ul>

<?php } // end if
wp_reset_query(); 
?>
<!-- The loop END -->

标签： phpwordpress

解决方案

你可以这样做：

var headings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

var $list = $('#list').detach();
$.each(headings.split(''), function() {
  var letter = this;
  var found = $list.find("li").filter(function() {
    return $(this).text().indexOf(letter) === 0;
  });
  if (found.length > 0) {
    $('body').append('<h2>' + letter + '</h2>');
    $('body').append($('<ul/>').append(found));
  }
});

演示

var headings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

var $list = $('#list').detach();
$.each(headings.split(''), function() {
  var letter = this;
  var found = $list.find("li").filter(function() {
    return $(this).text().indexOf(letter) === 0;
  });
  if (found.length > 0) {
    $('body').append('<h2>' + letter + '</h2>');
    $('body').append($('<ul/>').append(found));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>A item #1</li>
  <li>A item #2</li>
  <li>A item #3</li>
  <li>B item #4</li>
  <li>B item #5</li>
  <li>B item #6</li>
  <li>C item #7</li>
  <li>C item #8</li>
  <li>C item #9</li>
</ul>

我希望这有助于并解决您的问题

推荐阅读