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

I have a couple of lines of code in JQuery:

我在JQuery中有几行代码:

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

How can I rewrite it without using JQuery library just with JavaScript?

如何在不使用JavaScript的情况下使用JQuery库重写它?

1 个解决方案

#1

A correct translation would be something like:

正确的翻译将是这样的:

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

This could be simplified a lot depending on the markup (and optimized depending on the browser (e.g. support for querySelectorAll)). E.g. if you know that there will always only be one option that contains "Central" and whether there exists only one select element or not.

这可以根据标记进行大量简化(并根据浏览器进行优化(例如,对querySelectorAll的支持))。例如。如果你知道总会有一个选项包含“Central”,并且是否只有一个select元素。

Here is a stripped down version for one select element, known size of the list (i.e. > 1) and only one option that contains Central. So basically just reordering the option:

这是一个精选元素的精简版本,列表的已知大小(即> 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

Update:

If the option's text should be exactly Central, compare the text normally:

如果选项的文本应该完全是Central,则通常比较文本:

if(text === 'Central')