滾動到與JQuery開頭的第一個元素

Question

我有一個相當長的名稱列表，我想構建一個快速簡單的導航來滾動到以特定字符開頭的名稱。

所以，如果我有一個像鏈接 -

<a href="a">A</a> 
<a href="b">B</a> 
<a href="c">C</a> 

我通常會與人物之間建立IDS錨或申報單，並滾動到他們。在這種情況下，我在每個新的開始信前都沒有錨或div，我只是有一個很長的名單。

說，在列表中的每個名稱是一個<h1 class="name">Someone's Name</h1>

我可以得到封信

$('a').click(function(e) { 
    e.preventDefault(); 
    var letter = $(this).attr('href'); 
    //scroll to first h1.name element that begins with "letter" 
}); 

所以一旦我有封信，是有辦法，我可以發現，是第一要素一個h1.name開頭的那封信與JQuery？

Answer 1

我認爲最好的方法是使用filter()和核對的letter價值h1元素中的文本（文本是否與給定文本開始）

$('a').click(function (e) { 
    e.preventDefault(); 
    var letter = $(this).attr('href'); 
    //scroll to first h1.name element that begins with "letter" 
    var $target = $('h1.name').filter(function() { 
     return $.trim($(this).text()).toLowerCase().indexOf(letter) == 0 
    }); 
    //scroll to $target 
}); 

:contains()，因爲它沒有使用將在任何位置搜索給定的文本，而不僅僅是開始。

Answer 2

您可以主要包含每個字母元素的緩存：

var letters = {}; 

$('h1.name').each(function() { 
    // find first letter of element contents 
    var letter = (this.textContent || this.innerText || '').toLowerCase()[0]; 

    if (letter && !(letter in letters)) { 
     letters[letter] = this; // add to cache 
    } 
}); 

，然後使用該單擊處理內到相應的元素滾動到視圖：

$('a').on('click', function(e) { 
    e.preventDefault(); 

    // use last letter of anchor 
    var letter = this.getAttribute('href').toLowerCase(); 

    if (letter in letters) { 
     letters[letter].scrollIntoView(); 
    } 
}); 

Demo