Question

我有一个项目列表，我希望将其分为几个列表，每个列表都以一个字母开头的标题开头。

因此，以此作为起点：

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

Answer 1

您可以执行以下操作：

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>

我希望这可以帮助您解决问题

Answer 2

未经测试，但是您应该可以使用以下代码替换WP代码：

$letter = "";
while ( have_posts() ) {
  $title = get_the_title();
  if ($letter !== $title[0]) { //Check first letter against previous first letter
    if ($letter !== "") { // Close previous <ul> if not the first time in loop ?>
      </ul> <?php
    } ?>

    <h2><?= $title[0] ?></h2>
    <ul> <?php
  }
    the_post(); ?>
    <li>
      <a href="<?php the_permalink(); ?>">
        <?= $title ?>
      </a>
    </li> <?php
  $letter = $title[0];
} // end while
if ($letter !== "") { //If there were any posts, need to close last <ul> ?>
  </ul> <?php
}
wp_reset_query(); 
?>
<!-- The loop END -->

它基本上改变了循环，以检查与先前帖子的第一个字母是否匹配的第一个字母，并在这些情况下以最终关闭的<ul>开始一个新的</ul>。

奖金：<a>标签位于<li>标签内，以获取更合理的HTML

编辑：：缺少几个php标签，并将the_title()转换为get_the_title()，因为前者似乎在回显结果而不是返回结果。

Answer 3

我要做的是，我将在每个<li>上循环，然后将其推入相应的<ul>。

$(function () {
  // Loop.
  $("ul li").each(function () {
    var init = $(this).text().substr(0, 1);
    // If the element doesn't exist yet, create one.
    if ($("ul." + init).length == 0)
      $("ul").last().after('<ul class="' + init + '"></ul>');
    // Append it in the respective LI.
    $("ul." + init).append($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如何通过以字母开头的字母来划分ul

3 个答案: