I am trying to sort post-titles alphabetically using jQuery but nothing happens when I click on the sort filter (I might have wrong syntax). By default the All filter displays all of the posts I have currently. What would be the best and cleanest way to implement this? Thanks!
(Edited, I added some code that kmoser mentioned below)
$(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 >
<span data-filter='all'>All</span>
<span data-filter='sort'>Sort by Date</span>
<span data-filter='sort-date'>Sort by Date</span>
</div>
<!-- Posts -->
<section >
<div data-id="1">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
B foo (first)
</a>
<span >2012-11-03</span>
<p >Lorem foo</p>
</div>
<div data-id="2">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
A bar (second)
</a>
<span >2012-11-05</span>
<p >Lorem bar</p>
</div>
<div data-id="3">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
C baz (third)
</a>
<span >2012-11-01</span>
<p >Lorem baz</p>
</div>
</section>CodePudding user response：
I updated your code.
I think the mistake is when you want to display the result, and the date comparison I think could've been better, so I update the condition:
<!-- Sort Filter -->
<body>
<div >
<span data-filter="all">All</span>
<span data-filter="sort">Sort by Alphabetically</span>
<span data-filter="sort-date">Sort by Date</span>
</div>
<!-- Posts -->
<section >
<div data-id="1">
<img src="img/post-1.jpg" alt="" />
<a href="post-page.html" > C TEST </a>
<span >2021-11-01</span>
<p >Lorem ipsum dolor</p>
</div>
<div data-id="2">
<img src="img/post-1.jpg" alt="" />
<a href="post-page.html" > B TEST </a>
<span >2020-11-01</span>
<p >Lorem ipsum dolor</p>
</div>
<div data-id="3">
<img src="img/post-1.jpg" alt="" />
<a href="post-page.html" > B TEST </a>
<span >2020-11-01</span>
<p >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>
CodePudding user response：
Assuming multiple .post-box elements (as in my example below), you need to sort them and then insert them back into the DOM, replacing the contents of .post-container:
EDITED to sort by original order and by date.
$(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 >
<span data-filter='all'>All</span>
<span data-filter='sort'>Sort by Date</span>
</div>
<!-- Posts -->
<section >
<div data-id="1">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
foo (first)
</a>
<span >2 Feb 2022</span>
<p >Lorem foo</p>
</div>
<div data-id="2">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
bar (second)
</a>
<span >12 Feb 2022</span>
<p >Lorem bar</p>
</div>
<div data-id="3">
<img src="img/post-1.jpg" alt="" >
<a href="post-page.html" >
baz (third)
</a>
<span >9 Feb 2022</span>
<p >Lorem baz</p>
</div>
</section>