Question

我编写了一个JavaScript函数，该函数在段落元素中使用类mini的当前跨度数，其标识为mega，至少为1，如果小于4，添加足以使4.如果没有第二个mini，那么函数应该创建的第二个mini应该说2 ^nd，如果创建了第三个，则应该说3 ^rd，如果创建了第四个，则应该说4 ^{{{ 1}}}。例如，如果已经有2 th个跨度，那么该程序应该再增加2个，第一个添加说mini ³，第二个说rd ⁴。这是代码：

rd

Soooo ....如果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 = "2nd; mega.appendChild(mini); } mini.innerHTML = "3rd; mega.appendChild(mini); } mini.innerHTML = "4th; mega.appendChild(mini); } }为3，它可以正常工作，并为mega添加currentNumOfSpans。但是，如果4th为1或2，虽然它应分别添加currentNumOfSpans或2nd3rd4th，但它只会添加3rd4th。有人可以帮我弄清楚这有什么问题。感谢任何帮助，谢谢！

注意：如果您发现任何拼写错误，请注释或编辑，但它们不是问题，我已经在语法检查器中检查了我的代码，但我经常在我的代码中出错，因为我用的是一个小巧的手机键盘。所以基本上，我可能做的错字不是真正的问题。谢谢！的

Answer 1

您的示例包含一些拼写错误，其中大多数可通过调试程序运行代码找到，例如http://jshint.com。

但是，我会使用更实用的方法。以下方法不像您的那样硬编码，因此您可以将它用于多个元素，或者使用不同数量的跨度而对用法进行非常小的更改，我在下面的演示中已经显示了这一点。

＆＃13;

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));

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用JavaScript向父级添加跨度

1 个答案: