jQuery clone() 一个带有子元素的元素并保存到 data() 作为备份？

发布于 2024-12-31 23:55:03 字数 1235 浏览 0 评论 0原文

我的 jQuery 插件有问题。我无法发布整个脚本，因为它太大了，这是一个经过修改的摘录。基本上它的工作方式如下：

ajax 调用，如果结果集为空，则备份元素及其内容（如果尚未定义备份）并覆盖其内容
如果结果集包含数据，则查找其中的某些元素并使用 .html() 显示数据

但是上面有一些错误。当调用连续执行3次时，备份的子项不幸为空！

非常感谢任何帮助。这是控制流的简化版本：

var backup = function() { this.data('backup', this.clone(true)); }

var onObjectProperty = function(obj) {

   // This is where my script fail!!! 3 consecutive times of empty data,
   // and children() contains no data!
   if($.type(this.data('backup')) !== 'undefined')
      console.log(this.data('backup').children());

    };

if(!val.error && !val.count) // Not an error, but data is empty
{
   // Keyword "this" is the current element in selection loop (on which
   // the plugin was invoked)
   if($.type(context.data('backup')) === 'undefined')
      backup.call(this); // Backup if not already defined

   opt.onEmpty.call(context); // Call the function to handle empty data
   return true; // Skip the current iteration in the loop
}

// Here we have no errors and result set contains data
onObjectProperty.call(this, obj); // Pass the context and the data

编辑：发现错误，在将备份添加到 DOM 之前没有克隆备份！

原文

There is something wrong in my jQuery plugin. I can't post the whole script because it would be too big, this is a little and modified excerpt. Basically it works this way:

An ajax call, if result set is empty then backup the element and it's content (if there is no already backup defined) and the override it's content
If result set contains data look for certain elements inside it and use .html() to display the data

But there is somehting wrong in the above. When the call is executed 3 consecutive times children of the backup is sadly empty!

Any help is much appreciated. Here is a simplified version of the control flow:

var backup = function() { this.data('backup', this.clone(true)); }

var onObjectProperty = function(obj) {

   // This is where my script fail!!! 3 consecutive times of empty data,
   // and children() contains no data!
   if($.type(this.data('backup')) !== 'undefined')
      console.log(this.data('backup').children());

    };

if(!val.error && !val.count) // Not an error, but data is empty
{
   // Keyword "this" is the current element in selection loop (on which
   // the plugin was invoked)
   if($.type(context.data('backup')) === 'undefined')
      backup.call(this); // Backup if not already defined

   opt.onEmpty.call(context); // Call the function to handle empty data
   return true; // Skip the current iteration in the loop
}

// Here we have no errors and result set contains data
onObjectProperty.call(this, obj); // Pass the context and the data

EDIT: found the error, was not cloning the backup before adding it to the DOM!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

删除会话 2025-01-07 23:55:03

第二个 if-$.type 行的括号是什么？ =）

好的，明白了。不知道如何读取所有这些“obj”、“context”和“val”，它们如何适应，但对于它的价值，我设法获取数据的备份，请参见下文。

无论如何，很酷的主意！

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
var backup = function() { this.data("backup", this.clone(true)); }
function doit(x) { if ($.type(x.data("backup")) == "undefined") { backup.call(x); } }
function dumpit(x) {
    if ($.type(x.data("backup")) != "undefined") {
        console.log("backup", x.data("backup"));
        console.log("children", x.data("backup").children());
    }
}
function addit(x) {
    if ($.type(x.data("backup")) != "undefined") {
        var x = x.data("backup").clone();
        x.attr("id",null);
        $("body").append(x);
    }
}
</script>
</head>
<body>
    <div id="xxx" class="yyy">
        <p class="zzz">helu</p>
        <a href="#">there</a>
        <input></input>
    </div>
    <button onclick="doit($('#xxx'));">do</button>
    <button onclick="dumpit($('#xxx'));">see</button>
    <button onclick="addit($('#xxx'));">add</button>
</body>
</html>

What's with the parentheses on the second if-$.type line? =)

Ok got it. Not sure how to read all these "obj", "context" and "val", how they fit in, but for what it's worth I managed to get backups to/fro data going, see below.

Cool idea anyway!

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
var backup = function() { this.data("backup", this.clone(true)); }
function doit(x) { if ($.type(x.data("backup")) == "undefined") { backup.call(x); } }
function dumpit(x) {
    if ($.type(x.data("backup")) != "undefined") {
        console.log("backup", x.data("backup"));
        console.log("children", x.data("backup").children());
    }
}
function addit(x) {
    if ($.type(x.data("backup")) != "undefined") {
        var x = x.data("backup").clone();
        x.attr("id",null);
        $("body").append(x);
    }
}
</script>
</head>
<body>
    <div id="xxx" class="yyy">
        <p class="zzz">helu</p>
        <a href="#">there</a>
        <input></input>
    </div>
    <button onclick="doit($('#xxx'));">do</button>
    <button onclick="dumpit($('#xxx'));">see</button>
    <button onclick="addit($('#xxx'));">add</button>
</body>
</html>

回复收藏 0 原文

~没有更多了~