Как я могу переписать это без использования библиотеки JQuery только с JavaScript? - PullRequest
3 голосов
/ 07 марта 2011

У меня есть несколько строк кода в JQuery:

     var central = $('#townid option:contains("Central")');
     if (central.length){
        central.insertAfter('select option:first-child');
     }

Как я могу переписать его без использования библиотеки JQuery только с JavaScript?

1 Ответ

6 голосов
/ 07 марта 2011

Правильный перевод будет выглядеть примерно так:

var selects = document.getElementsByTagName('select'),
    options = document.getElementById('townid').getElementsByTagName('option'),
    options = Array.prototype.slice.call(options), //2 lines only for readability
    tmp = document.createDocumentFragment();

for(var i = 0, l = options.length; i < l; i++) {
    var option = options[i],
        text = option.innerText || option.textContent;
    if(text.indexOf('Central') > -1) {
        tmp.appendChild(option);
    }
}

for(var i = 0, l = selects.length; i < l; i++) {
    var select = selects[i],
         opts = select.getElementsByTagName('option');
    if(opts.length > 1) {
        select.insertBefore(tmp.cloneNode(true), opts[1]);
    }
    else {
        select.appendChild(tmp.cloneNode(true));
    }
}

DEMO

Это может быть упрощено в зависимости от разметки (и оптимизируется в зависимости от браузера (например, поддержка querySelectorAll)).Например, если вы знаете, что всегда будет только одна опция , которая содержит "Central", и существует ли только один элемент select или нет.

Вот урезанная версия для одногоselect элемент, известный размер списка (т.е.> 1) и только одна опция, содержащая Central.Так что, в основном, просто изменим порядок:текст опции должен быть точно Central, сравните текст обычно:

if(text === 'Central')
...