Javascript jQuery插件没有在匹配项之间循环？_Javascript_Jquery_Frontend

Javascript jQuery插件没有在匹配项之间循环？

javascript jquery

Javascript jQuery插件没有在匹配项之间循环？,javascript,jquery,frontend,Javascript,Jquery,Frontend,我有一个非常简单的插件，我正试图使。它所做的只是获取匹配的项，并在其前面加上一个div，该div的高度与用户在HTML中的数据属性中指定的宽度相同当我在只有几个div的测试页面上运行它时，只有最后一个div受插件的影响，其他的都不受影响下面是我对插件的一次令人悲伤的尝试： (function($) { $.fn.skillBarLoad = function( colourGiven, speedGiven) { var appendedSkillBar = $("<di

我有一个非常简单的插件，我正试图使。它所做的只是获取匹配的项，并在其前面加上一个div，该div的高度与用户在HTML中的数据属性中指定的宽度相同

当我在只有几个div的测试页面上运行它时，只有最后一个div受插件的影响，其他的都不受影响

下面是我对插件的一次令人悲伤的尝试：

(function($) {

$.fn.skillBarLoad = function( colourGiven, speedGiven) {

     var appendedSkillBar = $("<div></div>");
     appendedSkillBar.css({
         "border-radius": "inherit",
         "height": "100%",
         "width": "0%",
         "background-color": colourGiven
     });

    return this.each( function() {

    $(this).prepend(appendedSkillBar);
    var percentageFromData = $(this).attr('data-load-percent');

    appendedSkillBar.animate( {
        width: percentageFromData + "%"
     }, speedGiven);
    });
}

}(jQuery));

$(document).ready(function() {
    $(".skillBar").skillBarLoad("blue", 2000);
});

（函数（$）{
$.fn.skillBarLoad=函数（给定颜色，给定速度）{
var appendedSkillBar=$（“”）；
appendedSkillBar.css({
“边界半径”：“继承”，
“高度”：“100%”，
“宽度”：“0%”，
“背景色”：给定的颜色
});
返回此值。每个（函数（）{
$（this）.prepend（appendedSkillBar）；
var percentageFromData=$（this.attr（'data-load-percent'）；
附加技能栏。设置动画（{
宽度：percentageFromData+“%”
}，已给予）；
});
}
}（jQuery））；
$（文档）.ready（函数（）{
美元（“.skillBar”）.skillBarLoad（“蓝色”，2000年）；
});

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yo</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="skillBar" data-load-percent="90"></div>
    <div class="skillBar" data-load-percent="90"></div>
    <div class="skillBar" data-load-percent="90"></div>
</body>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">  </script>
<script src="jquery.skill-bars.js"></script>
</html>

哟

显然，对于我没有看到的问题，任何帮助、建议或温和的暗示都是非常感谢的

祝大家今天愉快

编辑：在评论中提供答案

.prepend（）不会多次复制该元素，因此改为使用.clone（），然后使用此克隆作为前缀。

您需要为

.each（）的每次迭代创建一个$（）

通过在循环之前定义一次CSS映射，您还可以更高效地完成工作
(function($) {
    $.fn.skillBarLoad = function(colourGiven, speedGiven) {
        var cssMap = {
            "border-radius": "inherit",
            "height": "100%",
            "width": "0%",
            "background-color": colourGiven
        };
        return this.each( function() {
            $("<div/>").css(cssMap).animate({
                width: $(this).data('load-percent') + "%"
            }, speedGiven).prependTo(this);
        });
    }
}(jQuery));

（函数（$）{
$.fn.skillBarLoad=函数（给定颜色，给定速度）{
var cssMap={
“边界半径”：“继承”，
“高度”：“100%”，
“宽度”：“0%”，
“背景色”：给定的颜色
};
返回此值。每个（函数（）{
$（“”）.css（cssMap）.动画({
宽度：$（此）.data（'load-percent'）+“%”
}，speedGiven）。prependTo（this）；
});
}
}（jQuery））；
我有一种感觉，this
在您的回调中只选择最后一个元素。@您知道引起问题的“this”是第一个this，还是第二个用$（）包装的；对不起，如果这看起来像初学者的话。我就是这样的人！：“如果以这种方式选择的单个元素被插入到DOM中其他位置的单个位置，它将被移动到目标位置（而不是克隆）”–您的appendedSkillBar
就是这样一个元素。因此，在每次迭代中，它都会从一个div移动到下一个div，最后只会在循环完成后出现在最后一个div中。@CBroe非常感谢。我一定会记下来的。是否有一个类似于prepend的函数允许多个副本。我在jQuery的dom插入页面上找不到任何内容。再次感谢。您只需自己克隆元素，然后预先制作该克隆。