Jquery 标尺每5个像素添加一个元素以填充它'；s宽度

小提琴-

今天我想从头开始构建一个标尺，从0开始，然后每隔5&10像素添加几个div来填充它的宽度

我的小提琴展示了我一直在努力完成的一个例子

下面是一个HTML示例

<div class='ruler'>
    <div class="tickLabel" style="left: 0px;">0</div>
    <div class="tickMinor" style="left: 5px;"></div>
    <div class="tickMajor" style="left: 10px;"></div>
    <div class="tickMinor" style="left: 15px;"></div>
    <div class="tickMajor" style="left: 20px;"></div>
    <div class="tickMinor" style="left: 25px;"></div>
    <div class="tickMajor" style="left: 30px;"></div>
    <div class="tickMinor" style="left: 35px;"></div>
    <div class="tickMajor" style="left: 40px;"></div>
    <div class="tickMinor" style="left: 45px;"></div>
    <div class="tickLabel" style="left: 50px;">50</div>
    and so on...
</div>

---

非常感谢您的帮助。

因为您想使用jQuery，所以有一个.resize（）（）函数，可以用来捕获所有窗口调整大小事件：

$(window).resize(function() {
    ....
});

要创建标尺，可以使用内部带有开关的for循环（例如），该循环基于当前标记（步骤）将向其添加特定类。要获得刻度/迭代次数，可以使用.innerWidth（）函数检查容器的宽度，并将其除以5（5px是单个刻度的长度）

创建标尺创建函数后，您可能会在两个位置调用它： 在document ready块内，在页面准备就绪时创建并显示它，在上面提到的窗口resize块内（因此标尺始终在平移容器的整个宽度）

下面是一个基于JSFIDLE的示例：

---

以前从未见过或使用过switch case语句。我得仔细阅读一下。谢谢这里：是一个更新版本，使用if-else if-else测试代替开关。如果你愿意的话。我一直很难在尺子上找到标签的位置。获取标尺上的正确标签，例如，可以使用迭代计数器。如果您想获得刻度的数量，请使用“i”，或者如果您想计算像素数，请使用“i*5”，因为每一步都有5个像素长。例如，上一个示例中的第11行可以更改为：“$tick.addClass（'ticklab'）.html（i*5）；”-这样，主刻度标签将显示标尺左侧的像素数。没关系。我很高兴能帮助你；-）。

$(window).resize(function() {
    ....
});