使用 jQuery 排序

Question

我正在尝试使用 jQuery 按字母顺序对 post-titles 进行排序，但是当我单击排序过滤器时没有任何反应（我的语法可能有误）。默认情况下，所有过滤器显示我当前拥有的所有帖子。实现这个的最好和最干净的方法是什么？谢谢！

（已编辑，我添加了下面 kmoser 提到的一些代码）

$(document).ready(function () {
    $(".filter-item").click(function () {
        const value = $(this).attr("data-filter");
        if (value == "all") {
            $(".post-box").show("1000");

            let html = $('.post-box').sort(
                (a, b) => {
                    return (
                        $(a).attr('data-id')
                            >
                        $(b).attr('data-id')
                    )
                }
            )

            $('.post.container').html(html)

        } else if (value == "sort") {
            let html = $('.post-box').sort(
                (a, b) => {
                    return (
                        $(a).find('.post-title').text().trim().localeCompare(
                            $(b).find('.post-title').text().trim()
                        )
                    )
                }
            )

            $('.post.container').html(html)

          // Or to sort by date:
        } else if (value == "sort-date") {

            let html = $('.post-box').sort(
                (a, b) => {
                    return (
                        Date.parse(
                            $(a).find('.post-date').text().trim()
                        )
                            >
                        Date.parse(
                            $(b).find('.post-date').text().trim()
                        )
                    )
                }
            )

            $('.post.container').html(html)
        }
    });

    $(".filter-item").click(function () {
        $(this).addClass("active-filter").siblings().removeClass("active-filter");
    });
});

// Header BackGround Change On Scroll
let header = document.querySelector("header");

window.addEventListener("scroll", () => {
  header.classList.toggle("shadow", window.scrollY > 0);
});

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- Sort Filter -->

<div class="post-filter container">
    <span class="filter-item active-filter" data-filter='all'>All</span>
    <span class="filter-item" data-filter='sort'>Sort by Date</span>
    <span class="filter-item" data-filter='sort-date'>Sort by Date</span>
</div>

<!-- Posts -->

<section class="post container">
    <div class="post-box" data-id="1">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
          B  foo (first)
        </a>
        <span class="post-date">2012-11-03</span>
        <p class="post-decription">Lorem foo</p>
    </div>
    <div class="post-box" data-id="2">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
          A  bar (second)
        </a>
        <span class="post-date">2012-11-05</span>
        <p class="post-decription">Lorem bar</p>
    </div>
    <div class="post-box" data-id="3">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
          C  baz (third)
        </a>
        <span class="post-date">2012-11-01</span>
        <p class="post-decription">Lorem baz</p>
    </div>
</section>

Answer 1

假设有多个 .post-box 元素（如下面的示例），您需要对它们进行排序，然后将它们插入回 DOM，替换 .post-container 的内容：

已编辑 按原始顺序和日期排序。

$(document).ready(function () {
    $(".filter-item").click(function () {
        const value = $(this).attr("data-filter");
        if (value == "all") {
            $(".post-box").show("1000");

            let html = $('.post-box').sort(
                (a, b) => {
                    return (
                        $(a).attr('data-id')
                            >
                        $(b).attr('data-id')
                    )
                }
            )

            $('.post.container').html(html)

        } else if (value == "sort") {
            let html = $('.post-box').sort(
                (a, b) => {
                    return (
                        $(a).find('.post-title').text().trim().localeCompare(
                            $(b).find('.post-title').text().trim()
                        )
                    )
                }
            )

            // Or to sort by date:
            html = $('.post-box').sort(
                (a, b) => {
                    return (
                        Date.parse(
                            $(a).find('.post-date').text().trim()
                        )
                            >
                        Date.parse(
                            $(b).find('.post-date').text().trim()
                        )
                    )
                }
            )

            $('.post.container').html(html)
        }
    });

    $(".filter-item").click(function () {
        $(this).addClass("active-filter").siblings().removeClass("active-filter");
    });
});

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<!-- Sort Filter -->

<div class="post-filter container">
    <span class="filter-item active-filter" data-filter='all'>All</span>
    <span class="filter-item" data-filter='sort'>Sort by Date</span>
</div>

<!-- Posts -->

<section class="post container">
    <div class="post-box" data-id="1">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
            foo (first)
        </a>
        <span class="post-date">2 Feb 2022</span>
        <p class="post-decription">Lorem foo</p>
    </div>
    <div class="post-box" data-id="2">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
            bar (second)
        </a>
        <span class="post-date">12 Feb 2022</span>
        <p class="post-decription">Lorem bar</p>
    </div>
    <div class="post-box" data-id="3">
        <img src="img/post-1.jpg" alt="" class="post-img">
        <a href="post-page.html" class="post-title">
            baz (third)
        </a>
        <span class="post-date">9 Feb 2022</span>
        <p class="post-decription">Lorem baz</p>
    </div>
</section>

Answer 2

我更新了你的代码。

我认为错误是当你想显示结果时，我认为日期比较可能会更好，所以我更新了条件：

<!-- Sort Filter -->
<body>
  <div class="post-filter container">
    <span class="filter-item active-filter" data-filter="all">All</span>
    <span class="filter-item" data-filter="sort">Sort by Alphabetically</span>
    <span class="filter-item" data-filter="sort-date">Sort by Date</span>
  </div>

  <!-- Posts -->

  <section class="post container">
    <div class="post-box" data-id="1">
      <img src="img/post-1.jpg" alt="" class="post-img" />
      <a href="post-page.html" class="post-title"> C TEST </a>
      <span class="post-date">2021-11-01</span>
      <p class="post-decription">Lorem ipsum dolor</p>
    </div>
    <div class="post-box" data-id="2">
      <img src="img/post-1.jpg" alt="" class="post-img" />
      <a href="post-page.html" class="post-title"> B TEST </a>
      <span class="post-date">2020-11-01</span>
      <p class="post-decription">Lorem ipsum dolor</p>
    </div>
    <div class="post-box" data-id="3">
      <img src="img/post-1.jpg" alt="" class="post-img" />
      <a href="post-page.html" class="post-title"> B TEST </a>
      <span class="post-date">2020-11-01</span>
      <p class="post-decription">Lorem ipsum dolor</p>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script>
    $(document).ready(function () {
      $(".filter-item").click(function () {
        console.log("test");
        const value = $(this).attr("data-filter");
        let html = "";
        if (value == "all") {
          $(".post-box").show("1000");

          html = $(".post-box").sort((a, b) => {
            return $(a).attr("data-id") < $(b).attr("data-id") ? -1 : 1;
          });
        } else if (value == "sort") {
          console.log("here");
          html = $(".post-box").sort((a, b) => {
            return $(a)
              .find(".post-title")
              .text()
              .trim()
              .localeCompare($(b).find(".post-title").text().trim());
          });
          // Or to sort by date:
        } else if (value == "sort-date") {
          html = $(".post-box").sort((a, b) => {
            const value =
              new Date($(a).find(".post-date").text().trim()).getTime() <
              new Date($(b).find(".post-date").text().trim()).getTime();
            
            return !value ? -1 : 1;
          });
        }
        $(".post.container").html(html);
      });

      $(".filter-item").click(function () {
        $(this)
          .addClass("active-filter")
          .siblings()
          .removeClass("active-filter");
      });
    });

    // Header BackGround Change On Scroll
    let header = document.querySelector("header");

    window.addEventListener("scroll", () => {
      header.classList.toggle("shadow", window.scrollY > 0);
    });
  </script>
</body>

使用 jQuery 排序

Sorting with jQuery

html

javascript

jquery