jquery - 如何访问 jQuery 插件中的附加元素并将其存储在全局变量中？

Question

我正在尝试慢慢前进并创建几个 jquery 插件，这些插件应该是轻量级的，并且可以满足我的需要。

现在我想做一个超级简单的jQuery进度条。问题是我无法访问使用 jQuery 动态附加的元素.append()。

这是 JSFidle：http: //jsfiddle.net/LRHXf/6/

正如你所看到的，“孩子”.smk_pb_child应该有不同的颜色和宽度，但由于某种未知的原因，我不能让它工作。

如何在变量中获取此元素，然后在需要的任何地方使用它？

Answer 1

您在附加元素之前设置了 var child，您需要在 append 函数中更改 var ：

plugin.appendChildren = function() {
    plugin.append('<div class="smk_pb_child"></div>');
    child = plugin.children('.smk_pb_child');
}

var child;

小提琴：http: //jsfiddle.net/LRHXf/12/

Answer 2

问题是您child在附加子元素之前初始化变量。appendChildren添加smk_pb_childdiv后，您需要在方法中初始化变量：

plugin.appendChildren = function () {
     plugin.append('<div class="smk_pb_child"></div>');
     child = plugin.children('.smk_pb_child');
}

工作演示

Answer 3

我看到您的 jsfiddle 演示并使用此代码

// Append children
        var appendhtml='<div class="smk_pb_child"></div>'; 
        plugin.appendChildren = function() {
                    plugin.append(appendhtml);
                }

或者你也可以使用

var appendhtml=$("<div />").attr('class',"smk_pb_child");

Answer 4

不要附加一个 html 字符串，而是尝试在 jQuery 中创建 html 并将其设置为一个变量，然后附加该变量。

plugin.appendChildren = function() {
    plugin.myDiv = $('<div class="smk_pb_child"></div>');
    plugin.append(plugin.myDiv);
};