javascript - 我如何在不使用 JavaScript 的情况下使用 JQuery 库来重写它？

Question

我在 JQuery 中有几行代码:

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

如何在不使用 JQuery 库的情况下仅通过 JavaScript 重写它？

Answer 1

正确的翻译应该是这样的:

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。所以基本上只是重新排序选项:

var options = document.getElementById('townid').getElementsByTagName('option');

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

DEMO

更新:

如果选项的文本应该正好是 Central，则正常比较文本:

if(text === 'Central')