Упростите это временное выпадающее время цикла?

я "создаю ниспадающее меню с опциями для каждого часа (0-23). Упростите это временное выпадающее время цикла?

Как бы упростить этот Js так обр петля? Как это сейчас, это точно так же, набрав, как если бы я вручную код каждый вариант в HTML

http://jsfiddle.net/kirkbross/zvj5pxqn/

$(arr).each(function() { 
$("#time").append($("<option>").attr('value',this.val).text(this.text)); 
});

источник

2015-05-21 Kirk Ross

Простой, создать цикл, который увеличивает часы и создать строку времени на лету:.

var t = 11, 
    a = "am"; 

for(var i = 0; i < 24; i++){ 
    if(i > 11){ 
     a = "pm"; 
    } 
    if(t == 12){ 
     t = 1; 
    }else{ 
     t += 1; 
    } 
    $("#time").append($("<option>").attr('value',i).text(t+":00 "+a)); 
}

См. Это fiddle для рабочего примера.

Как было предложено Pevara в комментариях, вы можете ускорить процесс, добавив параметры в переменную и обновив DOM один раз после цикла. А также уменьшить код с тройным выражениями рядный так:

var hour = 12, 
    options = ''; 

for (var i = 0; i < 24;i++) { 
    options += '<option value="' + i + '">' 
     + hour + ':00 ' + (i > 11 ? 'pm' : 'am') 
     + '</option>' 
    ; 
    hour = hour >= 12 ? 1 : hour + 1; 
} 
$("#time").html(options);

Смотрите их fiddle.

источник

2015-05-21 22:53:43 sharf

Спасибо любезно! Прекрасно работает. –

Могу я предложить обновить DOM только один раз, вне цикла. Это будет иметь большое значение для производительности. Я обновил вашу скрипку (с некоторыми незначительными обновлениями для чтения) http://jsfiddle.net/zvj5pxqn/4/ – Pevara

@Pevara, абсолютно. Я не сделал этого, потому что не чувствовал, что это часть первоначального вопроса OP. Аналогично, для некоторых людей троичные операции могут быть труднее прочитать. Я обновил свой ответ, чтобы включить ваш код и скрипку, спасибо за вклад! – sharf

Прежде всего, не полагайтесь на jQuery для выполнения простых задач. Это медленнее. (Перефразированный в соответствии с комментариями пользователя, хороший совет, спасибо Pevara)

Это быстрее. https://jsfiddle.net/fm43690a/ (первоначально заявлен 150й, но это было преувеличен. Даже при различных браузерах JS выполняет differetly, некоторые могут считать, что серьезно. На самом деле это только 6-8x быстрее. См jsfiddle)

var option, obj = document.getElementById("time"); 
 
for(x=0; x < 24; x++){ 
 
    option = document.createElement("option"); 
 
    option.text = 
 
     (x===0) ? ("12:00 am") 
 
\t :(x<12) ? (x+":00 am") 
 
     :(x===12) ? "12:00 pm" 
 
     :((x-12)+":00 pm") 
 
     ; 
 
    option.value = x;      
 
    obj.add(option); 
 
}

<select id="time"></select>

источник

2015-05-21 23:13:41 AnswerIsNot42

Будьте осторожны с такими смелыми утверждениями, если бы вы измерили это, вы бы увидели, что ваш код на самом деле немного медленнее, определенно не в 150 раз быстрее. Если jQuery уже находится на странице, нет никакого вреда в его использовании, если вы используете его с умом. Если вы действительно собираетесь работать, вы должны только обновить DOM один раз, вне цикла, так как это явно является узким местом. Посмотрите сами: http://jsperf.com/manipulate-dom-in-loop – Pevara

Интересно. Но хороший момент. Однако попробуйте это: https://jsfiddle.net/fm43690a/ – AnswerIsNot42

Вот коротким:

for (var i = 1; i <= 23; i++) { 
 
    var clock = (i < 12) ? 'am' : 'pm'; 
 
    var hour = (i > 12) ? i - 12 : i; 
 
    $("#time").append($("<option>").attr('value', i).text(hour + ':00 ' + clock)); 
 
}; 
 
$("#time option:first").before($("<option>").attr('value', 0).text('12:00 am'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="time"></select>

источник

2015-05-21 23:41:52 j08691

Упростите это временное выпадающее время цикла?

ответ

Смежные вопросы