Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Struggling to order a list in descending order using Tinysort without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
I’m trying to use Tinysort to order a dynamic list of job vacancy quantities into ‘highest to lowest’ order for the purposes of a slider on a careers page. I’ve shared the code I’m using with some arbitrary numbers within a ‘careerscount’ span within each list item (in place of the data pulled in from the API). I cannot get the list to order from highest to lowest. ASC order seems to work fine but DESC won’t work. Any clues as to where I’m going wrong with the function would be really appreciated!
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.min.js">
</script>
<title></title>
</head>
<body>
<div class="slick-slider">
<ul class="your-class list">
<li class="slide">
<h3>Customer Success</h3><span class="careerscount" id="customersuccessslidecount">1</span> open roles
</li>
<li class="slide">
<h3>Engineering</h3><span class="careerscount" id="engineeringslidecount">1</span> open roles
</li>
<li class="slide">
<h3>Finance</h3><span class="careerscount" id="financeslidecount">12</span> open roles
</li>
<li class="slide">
<h3 class="name">Insurance</h3><span class="careerscount" id="insuranceslidecount">0</span> open roles
</li>
<li class="slide">
<h3 class="name">Marketing</h3><span class="careerscount" id="marketingslidecount">0</span> open roles
</li>
<li class="slide">
<h3>People</h3><span class="careerscount" id="peopleslidecount">0</span> open roles
</li>
<li class="slide">
<h3>Operations</h3><span class="careerscount" id="operationsslidecount">4</span> open roles
</li>
<li class="slide">
<h3>Product</h3><span class="careerscount" id="productslidecount">9</span> open roles
</li>
<li class="slide">
<h3>Referencing</h3><span class="careerscount" id="referencingslidecount">3</span> open roles
</li>
<li class="slide">
<h3>Sales</h3><span class="careerscount" id="salesslidecount">0</span> open roles
</li>
<li class="slide">
<h3>Support</h3><span class="careerscount" id="supportslidecount">8</span> open roles
</li>
</ul>
</div>
<script>
window.onload = function() {
tinysort('li.slide', 'span.careerscount', {
order: 'desc',
emptyEnd: false
});
};
</script>
</body>
</html>
Answer
According to that library’s documentation. The second argument would be the options object so you’d need to combine the selector and options into a single object:
tinysort('li.slide', {
selector: 'span.careerscount',
order: 'desc',
emptyEnd: false
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.min.js">
</script>
<title></title>
</head>
<body>
<div class="slick-slider">
<ul class="your-class list">
<li class="slide">
<h3>Customer Success</h3><span class="careerscount" id="customersuccessslidecount">1</span> open roles
</li>
<li class="slide">
<h3>Engineering</h3><span class="careerscount" id="engineeringslidecount">1</span> open roles
</li>
<li class="slide">
<h3>Finance</h3><span class="careerscount" id="financeslidecount">12</span> open roles
</li>
<li class="slide">
<h3 class="name">Insurance</h3><span class="careerscount" id="insuranceslidecount">0</span> open roles
</li>
<li class="slide">
<h3 class="name">Marketing</h3><span class="careerscount" id="marketingslidecount">0</span> open roles
</li>
<li class="slide">
<h3>People</h3><span class="careerscount" id="peopleslidecount">0</span> open roles
</li>
<li class="slide">
<h3>Operations</h3><span class="careerscount" id="operationsslidecount">4</span> open roles
</li>
<li class="slide">
<h3>Product</h3><span class="careerscount" id="productslidecount">9</span> open roles
</li>
<li class="slide">
<h3>Referencing</h3><span class="careerscount" id="referencingslidecount">3</span> open roles
</li>
<li class="slide">
<h3>Sales</h3><span class="careerscount" id="salesslidecount">0</span> open roles
</li>
<li class="slide">
<h3>Support</h3><span class="careerscount" id="supportslidecount">8</span> open roles
</li>
</ul>
</div>
<script>
window.onload = function() {
tinysort('li.slide', {
selector: 'span.careerscount',
order: 'desc',
emptyEnd: false
});
};
</script>
</body>
</html>
We are here to answer your question about Struggling to order a list in descending order using Tinysort - If you find the proper solution, please don't forgot to share this with your team members.