Sorting a select with fractions in jquery / javascript

Question

I would like to sort the below select options by their computed fractional value, excluding the --please select-- option.

<select class="wpsc_select_variation">
<option value="0">-- Please Select --</option>
<option value="13">1"</option>
<option value="21">2''</option>
<option value="11">3/4"</option>
<option value="6">3/8"</option>
<option value="10">5/8"</option>
<option value="17">1-1/2''</option>
<option value="15">1-1/4''</option>
<option value="19">1-3/4''</option>
<option value="7">1/2"</option>
</select>

Code I've put together so far: Added to pastebin for brevity and history's sake.

Link

This would explain the length of the note 1 array being 3. But why is it 3? Why isn't it 9? Why does Chrome show the full array, but still have a length of 3, and Firefox show the full array after clicking the parent +, but the parent says undefined, option, option?

Confused...

EDITS: Edit to allow for multiple select boxes: Correct me if I'm wrong.

$(".wpsc_select_variation").each(function(index, element){
        $($(element).children().get().sort(function (a, b) {
        return parseInt(a.value) - parseInt(b.value);
        })).appendTo($(element));
    });

Latest edit using objects. Here goes:

var els = new Array();
var counter = 0;
$j("select.wpsc_select_variation option").each(function(index, ele){
var obj = new Object;
var i = $j(ele).text();
i = i.replace("\"", "");
i = i.replace("''", "");
if (i.indexOf("-") >= 0){
    i = i.split('-');
    split = i[1].split('/');
    i = eval(i[0]) + split[0] / split[1];
}
else if(i.indexOf("/") >= 0){
    split = i.split('/');
    i = split[0] / split[1];
}
i = eval(i);
obj.ind = i;
obj.ele = ele;
els[counter] = obj;
counter++;
});
els.sort(function (a, b) { return parseInt(a.ind) - parseInt(b.ind) });
console.log(els);

The above results in:

[Object { ind=NaN,  ele=option}, Object { ind=0.75,  ele=option}, Object { ind=0.375,  ele=option}, Object { ind=0.625,  ele=option}, Object { ind=0.5,  ele=option}, Object { ind=1,  ele=option}, Object { ind=1.5,  ele=option}, Object { ind=1.25,  ele=option}, Object { ind=1.75,  ele=option}, Object { ind=2,  ele=option}]

It appears to be sorting them somewhat, but as you can see, they are still out of order.

I realize that this code may be a bit on the slow side and could use some enhancements in general. Please feel free to shamelessly hack away at my code if you see room for improvement. — Josh Levinson
– Josh Levinson, Commented Feb 14, 2013 at 1:18
Non-integer number keys are not valid. Instead they are treated as strings and applied as keys to an object property rather than an array index. — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 14, 2013 at 1:19
Holy cow @ExplosionPills - I knew I should have come here first. Your solution completely eradicates the need for any of my code. Can you make it into a solution so I can accept it? — Josh Levinson
– Josh Levinson, Commented Feb 14, 2013 at 1:43
@Kolink - I think I see what you mean. So is the code I posted above completely worthless? — Josh Levinson
– Josh Levinson, Commented Feb 14, 2013 at 1:44

Explosion Pills · Accepted Answer · 2013-02-14 01:51:24Z

2

Since the option values are already in the order you need, you can just sort on those:

$($(".select_variation option").get().sort(function (a, b) {
    return parseInt(a.value) - parseInt(b.value);
})).appendTo(".select_variation");

answered Feb 14, 2013 at 1:51

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Josh Levinson Over a year ago

Thanks for your solution. I have run into a small glitch - there are multiple select's on the same pge, with the same class that need the same logic applied.

Explosion Pills Over a year ago

@JoshLevinson wrap this in a .each callback on the selects. If they weren't in order then I guess we would have to do more work sorting by the text which gave you so much trouble in the first place. We can address that in another question perhaps

Josh Levinson Over a year ago

What if the values were not in order? This is a drop-down generated by posts (WordPress) that may not always be generated in the same order. The posts are sequentially numbered upon creation. The option values are the post id's. For instance, I might create a post for 1", then come back and create on for 3/8". The 3/8" would then have a post id greater than the 1".

Explosion Pills Over a year ago

@JoshLevinson I'm going to have to rewrite the sort method to parse the decimal value based on the text then; give me a bit...

Explosion Pills Over a year ago

@JoshLevinson you can't sort an object because its members are not ordinal. What you can do is have an array of objects like this [{'text': optionText, 'elem': optionElement}].sort(function (a, b) { return parseInt(a.text) - parseInt(b.text)); }); This of course assumes that text is the sortable value

|

Community · Accepted Answer · 2017-05-23 11:56:24Z

The following jsfiddle resolves this question. Credit goes to ExplosionPills for his general help and Kolink for helping me discover more about arrays. Thanks to vol7ron here:
Turning an array of jquery objects into html for his help with the functions. Thanks guys!

function sortByRationalValue (a,b){
        return a.rationalValue - b.rationalValue;
    }
function returnObjectFromMeasurements(element, text) {
    var obj = {},
        range = text.replace(/["'”″]/g, '').split('-'),
        rational;

    if (range.length > 1)
        rational = eval(range[0]) + eval(range[1]);
    else
        rational = eval(range[0]);

    obj.rationalValue = rational;
    obj.element       = element;
    return obj;
}
jQuery(document).ready(function( $ ) {
    $(".wpsc_select_variation").each(function (index, element) {
        var els = new Array();
        var counter = 0;
        var children = $(element).children();
        $(children).each(function (index, ele) {
            els[index] = returnObjectFromMeasurements(ele, $(ele).text());
        });
        els.sort(sortByRationalValue);
        var elements = new Array();
        $.each(els, function (index, value) {
            elements[index] = value.element;
        });
        $(this).html(elements);
    });
});

http://jsfiddle.net/vwWJ3/5/

Collectives™ on Stack Overflow

Sorting a select with fractions in jquery / javascript

Link

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related