JS: перебрать строки, найти первую букву, вывести как привязку группы букв к связанной строке (ям)? - PullRequest
Новая
       11

JS: перебрать строки, найти первую букву, вывести как привязку группы букв к связанной строке (ям)?

3 голосов
/ 05 августа 2011

Сценарий: У меня есть содержимое, которое выводится в алфавитном порядке в список из библиотеки ресурсов.Мне нужно иметь возможность перебирать каждый элемент / элемент (например, название отдела) в этом списке и группировать все, начиная с 'A' ('B', 'C', 'D' и т. Д.), В свой собственный классдля якорной навигации.Затем мне нужно найти, какие буквы были найдены, и создать групповые якоря.

Желаемый результат: В верхней части страницы находится каждая найденная буква алфавита, в которой есть элемент (ы) с этой буквой.Нажатие на букву приведет к привязке к секции / div (новый класс) со всеми элементами соответствующей буквы.

Что я пробовал (найти первую букву и создать группу): 

    for(var i=0; i<input_1.length; i++){ //input_1 is the name of the specific resource library
   var firstChar = input_1[i].charAt(0)
   var newGroup = firstChar + "_input_1";
   if(typeof(window[newGroup]) == 'undefined') window[newGroup] = []; //if var doesn't exist, create it
   window[newGroup].push(input_1[i]);
}
A_input_1 = []; //A-letter-specific group

Я вне себя, когда дело доходит до создания привязки из этой группы к связанным строкам.Идеи?

Ответы [ 2 ]

1 голос
/ 05 августа 2011

Вам необходимо использовать функции DOM для управления DOM. Это какая-то боль, на самом деле. Если честно, я бы с этим не связывался; Есть библиотеки, которые делают вещи проще. Пойдем с JQuery.

Скажем, на вашей странице есть следующий HTML: 

<ul id="TheList">
    <li>Auspicious</li>
    <li>Brobdingnagian</li>
    <li>Calico</li>
    <li>Doppleganger</li>
    <li>Etc.</li>
</ul>

Код JQuery для управления им будет выглядеть примерно так (я не проверял этот код, чтобы убедиться, что он работает): 

var previousFirst = null;
$('#TheList').each(function() {
    var text = $(this).text();
    if (previousFirst === null)  previousFirst = $(this);

    $(this).addClass(text.charAt(0) + '_input_1');

    if (text.charAt(0) != previousFirst.text().charAt(0))  {
        $('<a name="'+ previousFirst.text().charAt(0) +'"></a>').prependTo(previousFirst);
        previousFirst = $(this);
    }
});

Если вы не знакомы с JQuery, я советую вам прочитать об этом на jquery.com. После того, как вы ознакомитесь с работой библиотеки, код должен быть понятным и легким для понимания. Тем не менее, если вам нужны какие-либо разъяснения, не стесняйтесь спрашивать, и я сделаю все возможное.

0 голосов
/ 05 августа 2011

Не могу придумать нативный метод, который сделает это более элегантно, чем цикл по всем элементам в списке.Таким образом, производительность может быть проблемой, если у вас большое количество элементов или в медленных клиентских браузерах.

Принимая во внимание вышесказанное, вот один из подходов: 

var length = input_1.length;
var groups = {};

for ( var i = 0; i < length; i ++ )
{
    var item      = input_1[ i ];
    var firstChar = item.charAt( 0 );

    groups[ firstChar ] = groups[ firstChar ] || [];
    groups[ firstChar ].push( item );
}

Значение длины'рассчитывается извне как очень небольшая оптимизация в циклах - в противном случае JavaScript будет пересматривать длину массива каждый раз вокруг цикла.Кроме этого, конечный результат от входного массива строк состоит в том, что «группы» будут иметь ряд ключей / свойств, соответствующих всем используемым первым буквам входных строк, и каждый из этих ключей имеет, в качестве своего значения, массивсгруппированных строк.Сортировка не предпринимается.

Пример: 

input_1 = [ "hello", "an", "cat", "hi", "henry", "thing", "anchor" ];

=> groups[ "a" ] is [ "an", "anchor" ]
   groups[ "c" ] is [ "cat" ]
   groups[ "h" ] is [ "hello", "hi", "henry" ]
   groups[ "t" ] is [ "thing" ]
...