2012-03-17 25 views
1

這裏是什麼,我試圖完成的基本思想,我有一個列表...有沒有一種方法可以根據包含整數的最近屬性來定位項目?

<ul> 
<li position="400">Item 1</li> 
<li position="510">Item 2</li> 
<li position="590">Item 3</li> 
<li position="614">Item 4</li> 
</ul> 

而我想要做的就是選擇一個基於數字的最接近的項目。

如果我們的隨機數是490,這將增加「選擇了」到列表中第2項

的類,但我不知道如何做到這一點,或者如果它甚至有可能......我在做這個用於導航目的,所以...

var position = $(window).scrollTop(); 

然後按鍵,與位置選擇列表項屬性最接近「位置」變量。我有道理嗎?

如果有人可以幫助通過這個走我,我會很感激的,我迷路了

+0

520怎麼樣?你想要它選擇510?或590?選擇總是向前最接近?或者它也可能倒退? – 2012-03-17 07:11:39

+0

嗯,根據情況我想要做它向後或向前(基於向上箭頭或向下箭頭),但是,如果有人可以解釋如何做到這一點,我敢肯定,我可以從中找出它那裏。我只是沒有模糊的想法如何實現,也就是選擇一個具有與特定變量最接近的屬性的項目。 – Ian 2012-03-17 07:19:03

+0

看到更新的答案http://stackoverflow.com/a/9748013/880434 – 2012-03-17 07:39:18

回答

2
function selectClosest(val){ 
var diffs = []; 
$("li[position]").each(function(){ 
    diffs.push(Math.abs(parseInt($(this).attr("position"))-val)); 
}); 
$("li[position]").eq(diffs.indexOf(Math.min.apply(Math,diffs))).css("font-weight","bold"); 
} 

selectClosest(551); 
+0

ooooh真棒,這看起來像我需要的東西的類型。我會稍微調整一下並回復你。感謝一堆答案。 – Ian 2012-03-17 07:33:54

1

我相信你可以做位置的陣列上的二進制搜索: 只需創建位置的數組通過「位置」屬性進行排序,然後執行二進制搜索:

var positions = []; 
$("[position]").sort(function (a, b) { 
    return $(a).attr("position") - $(b).attr("position") 
}) 
.each(function() { 
    positions.push(parseInt($(this).attr("position"))); 
}); 
0

使用對這個職位的解決方案Formal way of getting closest values in array in Javascript, given a value and a sorted array?你可以做這樣的事情:http://jsfiddle.net/elclanrs/phFUq/

var num = 600, // scroll number 
    $li = $('li'), 
    pos = []; 

$li.each(function() { 
    pos.push($(this).attr('position')); 
}); 

function sortfunc(a, b) { // To sort `pos` array 
    return a - b; 
} 
var getClosestValues = function(a, x) { 
    var lo, hi; 
    for (var i = a.length; i--;) { 
     if (a[i] <= x && (lo === undefined || lo < a[i])) lo = a[i]; 
     if (a[i] >= x && (hi === undefined || hi > a[i])) hi = a[i]; 
    }; 
    return [lo, hi]; 
}; 

$('li[position=' + 
    getClosestValues(pos.sort(sortfunc), num)[0] + 
    ']').toggleClass('red'); // Or whatever... 
相關問題