Добавление интервалов к родительскому объекту с помощью JavaScript

Question

Я написал функцию JavaScript, которая принимает текущее число пролетов класса mini в элементе абзаца с идентификатором mega, который составляет не менее 1, а если их меньше 4, добавляется достаточно, чтобы сделать 4. Если не было второго mini, то второй mini, что функция должна создать, должен сказать 2nd, если третий один создан, он должен сказать 3rd, а если четвертый создано, оно должно сказать 4th. Например, если уже есть 2 mini пролеты, программа, необходимо добавить 2 больше, то первый один добавлено говоря 3rd и второй один говорил 4rd. Вот код:

function addSpans(currentNumOfSpans) 
{ 
    var mega  = document.getElementById("mega"); 
    var mini  = document.createElement("span"); 
    mini.className = "mini"; 
    if (currentNumOfSpans < 4) 
    { 
     if (currentNumOfSpans < 3) 
     { 
      if (currentNumOfSpans < 2) 
      { 
       mini.innerHTML = "2<sup>nd</sup>; 
       mega.appendChild(mini); 
      } 
      mini.innerHTML = "3<sup>rd</sup>; 
      mega.appendChild(mini); 
     } 
     mini.innerHTML = "4<sup>th</sup>; 
       mega.appendChild(mini); 
    } 
} 

Тааак .... Если currentNumOfSpans 3, он отлично работает, и добавляет 4th к мега. Однако, если currentNumOfSpans составляет 1 или 2, тогда как он должен добавить 2nd3rd4th или 3rd4th соответственно, он просто добавляет 4th. Может кто-то помочь мне выяснить, что с этим не так. Любая помощь оценена, спасибо!

Примечание: Если вы заметили какие-либо опечатки, прокомментируйте или отредактируйте их, но это не проблема, я проверил свой код в синтаксическом контролере, но часто делаю ошибки в своем коде на SO, потому что я используйте крошечную клавиатуру телефона. Так что в принципе, опечатки, которые я, вероятно, сделал, не являются реальной проблемой. Благодаря!

Answer 1

Ваш пример включает несколько опечаток, большинство из которых можно найти, запустив код через отладчик, например http://jshint.com.

Однако я бы использовал более функциональный подход. Следующий метод не является жестко закодированным, как ваш, поэтому вы можете использовать его для нескольких элементов или использовать другое количество интервалов с минимальными изменениями в использовании, я показал это в демонстрации ниже. !

function getSuffix(i) { 
 
    var j = i % 10, k = i % 100; 
 
    if (j == 1 && k != 11) return i + "<sup>st</sup>"; 
 
    if (j == 2 && k != 12) return i + "<sup>nd</sup>"; 
 
    if (j == 3 && k != 13) return i + "<sup>rd</sup>"; 
 
    return i + "<sup>th</sup>"; 
 
} 
 
function addSpans(scope, length) { 
 
    var spans = scope.querySelectorAll('.mini'); 
 
    var current = length - (length - spans.length); 
 
    while(current < length) { 
 
     var span = document.createElement('span'); 
 
     span.className = 'mini'; 
 
     span.innerHTML = getSuffix(++current); 
 
     scope.appendChild(span); 
 
    } 
 
} 
 

 
var wrap = document.querySelector('.wrap'), divs; 
 
var clone = wrap.cloneNode(true); 
 

 
wrap.parentNode.appendChild(clone); 
 

 
divs = wrap.querySelectorAll('.mega'); 
 
for(var i in Object.keys(divs)) addSpans(divs[i], 4); 
 

 
divs = clone.querySelectorAll('.mega'); 
 
for(var i in Object.keys(divs)) addSpans(divs[i], 6 + (i * 2));

.mega { font-size: 0; } .mini { display: inline-block; width: 40px; font-size: 16px; }

<div class="wrap"> 
 
    <div class="mega"></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span><span class="mini">4<sup>th</sup></span></div> 
 
</div>