The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element:

$(".tab_entry").sort(function(a,b){
    return parseFloat(a.dataset.ranking) < parseFloat(b.dataset.ranking)
}).appendTo('div.active');

The Issue: While this code works smoothly on Firefox 24, it runs into problems on Chrome 28 (sorting fails, wrong order), and doesn't perform as expected on Safari 5.1.7 and IE 10.

Anyone come across a fix for this?

javascriptjquerycsssortingwebkit

Answer №1

There is no built-in sort function in the jQuery API.

If you need to sort your elements, you can first convert them into an array and then use the native sort function of the browser:

var sortedElements = $(".tab_entry").toArray().sort(function(a,b){ ... })

It is important to note that the sort function should return a numerical value, not just true or false: Array.prototype.sort

function(a,b) {
    //Calculate and return the difference in rankings.
    //Adjust the terms based on the desired order.
    return parseFloat(a.dataset.ranking) - parseFloat(b.dataset.ranking)
}

Answer №2

Give this a shot:

return parseFloat(x.dataset.ranking) - parseFloat(y.dataset.ranking);

When using this method, it will yield a negative outcome if x is smaller than y, resulting in x coming before y and vice versa. If both values are identical, the function will return 0, maintaining the existing order due to the unstable nature of the sort.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust index starting from 0 in JavaScript

Struggling with setting a consistently unique index that increments by one. Here is an example of my array: const originalArr = [ { name: 'first parent array', childArray: [ { name: '1 / first child' }, ...

javascriptarraysjavascript-objectsincrementunique-index

Identification of inappropriate language in usernames

One of the challenges I'm facing is detecting inappropriate language in usernames. Currently, I am using regex to validate the username based on a specific pattern: "/^[A-Za-z0-9]*(\d*\.\d*)*[A-Za-z0-9]+$/" This regex pattern allows u ...

javascriptregexreactjsyup

Display or conceal a div element depending on the value of a row in a MySQL

Hey everyone, I'm facing an issue where I want to display or hide a div based on a MySQL value. Unfortunately, I can't seem to get it right. Can anyone help me figure out what I'm doing wrong? Here's my code. Thanks in advance for your ...

phpjquerymysql

Display and Conceal Selected Choices

I have designed a simple form with two dropdown menus. Both menus have the same options: <option value='1234:0'>Closed</option> <option value='4567:2'>Open</option> <option value='6857:1'>Dead< ...

phpjqueryhidehtml-select

How to delete items containing NULL values from a JSON array using JQuery/JavaScript

While browsing through StackOverflow, I came across some questions related to this topic, but none of the solutions I found seemed to work for me. It appears to be a common issue, and I suspect that I might not be constructing the JSON object correctly. M ...

jqueryjsonajax

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

Is it possible to set up a local version of the Firebase database for development testing?

Can the actual code on Firebase database be avoided during development by running a local instance and developing using that, similar to other MongoDB and MySQL databases? ...

javascriptnode.jsfirebasefirebase-realtime-database

There was an issue with the Google Maps embed API that resulted in an error with interpolation

My goal is to utilize the Google Maps API in order to showcase a map using data from a JSON file. However, whenever I attempt to incorporate the JSON data, an error message 'Error: [$interpolate:noconcat] Error while interpolating' pops up. < ...

javascripthtmlangularjsgoogle-maps

Divide an image into several sections without the need to reload the image multiple times

I am looking for a way to divide an image into separate "portions" without having to load the image multiple times to save bandwidth. In this case, I want to split the image into 4 quadrants, but ideally, I would like a scalable solution. https://i.sstat ...

jquerycssimageclip

Storing JSON data as a string within JSON format with the help of PHP

When conducting testing, I am looking to utilize Ajax for requesting JSON data from the server. The JSON format that Ajax should receive appears as follows: json=[ {"source":"pa","jsonstring": '{"a":1,"b":2,"c":3}'}, {"source":"pa","json ...

phpjqueryjsonajax

Is there a way to move the navbar to the right side of the screen?

How do I create a navigation menu that takes up half of the screen on the left side while allowing for scrolling on the right side without moving the navigation? What I am aiming for is similar to the images linked below: example example I attempted to u ...

htmlcssbootstrap-4

Elements refuse to show up in a single line

I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...

htmlcss

Difficulty in centering certain elements using Bootstrap

I have recently constructed an element for a webpage within the site I am developing. The item is complete, but I am struggling to center it on the page properly. While I can easily center the image, the text associated with it refuses to budge. Here is t ...

htmlcssbootstrap-4

Discovering the required rotation angle for an object to directly face another using JS HTML5 CANVAS

Hey there, I'm currently working on a game project in Javascript where I have a player and a cursor. I already know the positions of both objects, but what I need help with is determining the angle in degrees or radians that the player needs to rotate ...

javascripthtmlcanvasrotation

Setting a fresh keybinding in Atom on macOS

Recently, I decided to switch over to using Atom on my Macbook and I wanted to set up a keybinding where alt-up arrow would act as page up and alt-down arrow for page down. Despite my efforts, I have not been successful in getting this to work. I'm p ...

javascriptmacosatom-editor

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

htmlcsswebfrontendresponsive

Retrieve the content following a successful loading of the remote URL

I have been utilizing this function to retrieve content from a Remote URL function fetchContent($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $scrapedPage = curl_exec($ch); curl_close($ch); $content = $scrapedPage; return ...

javascriptphpcurlfile-get-contents

What is the best way to utilize JavaScript variables that are declared on index.html/index.jsp in Vue.js?

Just starting out with Vue.js and I recently finished developing a Vue.js app using the terminal. I then deployed it on a Java web application and noticed that everything works fine when running it as is. However, I now need to pass a csrftoken to my Vu ...

javascriptjspvue.jsvuejs2

When trying to implement appDir and withPWA in next.config.js, an error has been encountered

My next.config.js is set up with next-pwa and an experimental app feature included. const withPWA = require('next-pwa'); module.exports = withPWA({ pwa: { dest: 'public', disable: process.env.NODE_ENV === 'development&ap ...

javascriptnext.js

Maintaining Existing Filters and Incorporating Additional Filters in React/Next.js Data Filtering

I'm currently facing a challenge with filtering data in React/Next.js. The issue I'm encountering is that whenever I set a new filter, the previous filters get removed. For instance, if a user performs a search, it works fine but the tag filters ...

javascriptreactjsreact-nativenext.js