I have 12 different numbers stored in variables, like this:

var span1 = 8.333333333;
var span2 = 16.66666667;
var span3 = 25;
var span4 = 33.33333333;
var span5 = 41.66666667;
var span6 = 50;
var span7 = 58.33333333;
var span8 = 66.66666667;
var span9 = 75;
var span10 = 83.33333333;
var span11 = 91.66666667;
var span12 = 100;

I have a function which pares a div's width to its parent's width and returns a value as a percentage (minus the % sign), for example, 48.5586. I'd like the function to check which of these span variables the result is closest to. For example, 48.5586 would return "span6" as it's closer to 50 than 41.666667.

Don't really know where to start with this one, any ideas?

I have 12 different numbers stored in variables, like this:

var span1 = 8.333333333;
var span2 = 16.66666667;
var span3 = 25;
var span4 = 33.33333333;
var span5 = 41.66666667;
var span6 = 50;
var span7 = 58.33333333;
var span8 = 66.66666667;
var span9 = 75;
var span10 = 83.33333333;
var span11 = 91.66666667;
var span12 = 100;

I have a function which pares a div's width to its parent's width and returns a value as a percentage (minus the % sign), for example, 48.5586. I'd like the function to check which of these span variables the result is closest to. For example, 48.5586 would return "span6" as it's closer to 50 than 41.666667.

Don't really know where to start with this one, any ideas?

• javascript

Share Improve this question Follow asked Jan 23, 2013 at 0:12 JVGJVG 21.2k4848 gold badges141141 silver badges216216 bronze badges 2

• 4 Is there a reason you have twelve variables and not one array? – user1479055 Commented Jan 23, 2013 at 0:13
• if these are percentages for a responsive grid don't forget that there are the gutters between the columns, and there are only 11 of them. – Peter Wooster Commented Jan 23, 2013 at 0:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Since each span is 8 1/3 % more than the previous one, which is just 100/12, you should be able to use a formula to work out which span class you need.

I worked out the following:

function spanClass(percentWidth) {
    return 'span' + Math.round(percentWidth / (100/12));
}

This gives span6 for 48.5586.

The smallest difference can be found by taking the minimum of the absolute value of the difference between your input number and each variable's value.

That said, you should really use a proper data structure, like an object or an array, for mapping these strings to numbers.

Put the values in an array, then you can sort the array on the differece between the values. The smallest differece is first in the array, so that is the closest value:

var spans = [
    { span: 1, value: 8.333333333 },
    { span: 2, value: 16.66666667 },
    { span: 3, value: 25 },
    { span: 4, value: 33.33333333 },
    { span: 5, value: 41.66666667 },
    { span: 6, value: 50 },
    { span: 7, value: 58.33333333 },
    { span: 8, value: 66.66666667 },
    { span: 9, value: 75 },
    { span: 10, value: 83.33333333 },
    { span: 11, value: 91.66666667 },
    { span: 12, value: 100 }
];

var value = 48.5586;

spans.sort(function(x, y){
    var a = Math.abs(value - x.value);
    var b = Math.abs(value - y.value);
    return a == b ? 0 : a < b ? -1 : 1;
});

alert(spans[0].span);

Demo: http://jsfiddle/Guffa/77Rf9/

Its better to have array. in my code also i am converting your variables to array and then processing. Eval is bad and should not be used

http://codebins./bin/4ldqp6b

var span1 = 8.333333333;
var span2 = 16.66666667;
var span3 = 25;
var span4 = 33.33333333;
var span5 = 41.66666667;
var span6 = 50;
var span7 = 58.33333333;
var span8 = 66.66666667;
var span9 = 75;
var span10 = 83.33333333;
var span11 = 91.66666667;
var span12 = 100;

var arr = [];
for (var i = 0; i < 12; i++) {
    eval('arr[' + i + '] = span' + (i + 1));
}


function closestTo(arr, val) {
    var closest = 10000,
        ind = -1,
        diff = 10000; // some random number
    for (var i = 0; i < arr.length; i++) {
        var tmp = Math.abs(val - arr[i]);
        if (diff > tmp) {
            diff = tmp;
            closest = arr[i];
            ind = i;
        }
    }
    alert("Closesnt Number: " + closest + "\nClosest Index:" + ind + "\nclosest variable: span" + (ind + 1))
}

closestTo(arr, 50.12)

Implementation of a closest function in JavaScript. Moved all the spans into an object to make iterating over them easier. Just enumerate all the spans and keep the closest one.

var spans = {
  span1: 8.333333333,
  span2: 16.66666667,
  span3: 25,
  span4: 33.33333333,
  span5: 41.66666667,
  span6: 50,
  span7: 58.33333333,
  span8: 66.66666667,
  span9: 75,
  span10: 83.33333333,
  span11: 91.66666667,
  span12: 100
};

function closest(value) {
  var delta
    , lastMatch;

  Object.keys(spans).forEach(function (span) {
    var thisDelta;
    if (!delta) {
      lastMatch = span;
      delta = Math.abs(value - spans[span]);
    } else {
      thisDelta = Math.abs(value - spans[span]);
      if (thisDelta < delta) {
        lastMatch = span;
        delta = thisDelta;
      }
    }
  });
  return lastMatch;
}

var result = closest(48.5586);

console.log(result);

Here a working Codepen example.