按名称创建后引用jquery附加元素？答案

【问题标题】：Reference jquery appended element after creation by name?按名称创建后引用jquery附加元素？
【发布时间】：2016-07-07 00:33:21
【问题描述】：

我正在创建一些引用元素并将它们附加到 DOM 的 jQuery 对象。我希望能够按名称引用它们，这样我就不必使用一堆选择器将事件与它们联系起来。这是一个愚蠢的例子代码：

<div class="body>

</div>

$(document).ready(function(){
        wrapper = $("<div />")
            .addClass("wrapper")
            .click(function(e){
                if (e.target === this)
                    $(this).hide();
            })
            $('.body').wrap(wrapper);

        close = $("<button />")
            .addClass("close")
            .text('CLICK TO CLOSE')
            .click(function(e){
                 ///HIDE ".wrapper" FROM HERE
                 $(wrapper).hide();
                 ///HIDE ".wrapper" FROM HERE
            })
            .prependTo($('.body'));
})

JSFiddle Here

我希望能够单击“关闭”按钮并隐藏“包装器”。我可以使用$('.wrapper').hide() 隐藏它，但是会有多个包装器，它只需要针对一个。我可以使用$(this).closest('.wrapper').hide()，但现在它变得一团糟。有没有办法从“close”中引用“wrapper”变量来避免所有额外的代码？

【问题讨论】：

所需的结构是什么？ .wrapper 是最外面的容器吗？每个.wrapper 元素是否都包含自己的.body？ .close 是 .body 的孩子或兄弟姐妹吗？
是的，对于 dom 结构 .wrapper 是外部然后 .body 然后内部是 .close （它们最终是模态，这只是简单的版本）。在代码中而不是在准备好的 DOM 中，这是在 init 函数中调用的，因此每个“模态”都会调用一次代码，但我想如果我可以解决它，我可以将它应用于所有。如果您认为这是必要的，将会更新。

标签： jquery object dom

【解决方案1】：

问题在于，当您为包装器创建变量时，它仍然是jQuery object。所以在赋值的同时做你的 wrap，它实际上变成了 DOM 中的东西，它可以被隐藏。

见this小提琴。

(function ($) {
    "use strict";
    $(document).ready(function () {
        var wrapper = $(".body").wrap($("<div></div>")
            .addClass("wrapper")
            .click(function (e) {
                if (e.target === this) {
                    $(this).hide();
                }
            }));

        $("<button></button>")
            .addClass("close")
            .text("CLICK TO CLOSE")
            .click(function () {
                $(wrapper.parent(".wrapper")).hide();
            })
            .prependTo($(".body"));
    });
}(jQuery));

您的脚本的这个版本通过了JSLint，但允许this 除外。

【讨论】：

这更接近了，我很感激，但我可能措辞不佳，我需要关闭按钮来隐藏黑色包装（以及其中的所有内容）而不仅仅是红色的“.body” .很抱歉造成混乱，但很有帮助
这当然是可能的，它有效，它只是我认为更混乱的一个。但如果没有人有更好的解决方案，那可能就是它了。
我自己没有看到任何更简单的方法，晚上就签了。（我个人也看不出有什么问题。）祝你好运！
@DasBeasto 非常固执地给予代表并接受答案然后嗯？！嘘
是的，当涉及到我将在我的项目中实现的代码时，我相当固执。我仍然希望有一个更清洁的解决方案。在接受答案后，人们不太愿意提供替代方案。再加上我刚从假期回来的事实......

【解决方案2】：

我发现问题不在于 click 函数的范围，而在于 wrap() 函数的工作方式。当您使用 jQuery .Wrap() 时，它会在指定元素周围包装结构的副本，并将原始作为一个集合返回，在我的情况下，它丢失了它的引用。因此，我没有包装 .body，而是简单地将包装器附加到主体使用 '.replaceWith' 的位置，并将主体附加到该包装器上（本质上是 .wrap()，但以我自己的方式）。这很有效，并且允许我仅使用

来隐藏包装器

wrapper.hide()

非常干净。

完整代码：

$(document).ready(function(){
        $body = $('.body');
        wrapper = $("<div />")
                .addClass("wrapper")
                .click(function(e){
                    if (e.target === this)
                        $(this).hide();
                })
                $body.replaceWith(wrapper)
                wrapper.append($body);

        close = $("<button />")
                .addClass("close")
                .text('CLICK TO CLOSE')
                .click(function(e){
                     wrapper.hide();
                })
                .prependTo($('.body'));
})

工作小提琴：https://jsfiddle.net/1s9o198a/

【讨论】：