jQuery：隐藏动态创建的选择 DOM 元素答案

【问题标题】：jQuery : Hide select DOM elements created on the flyjQuery：隐藏动态创建的选择 DOM 元素
【发布时间】：2012-07-06 14:00:11
【问题描述】：

在以下代码中：

$(document).ready( function () {
    var hideInit = function () {
            $(selector1).hide();
    }
    var loadInit = function () {
            //get data
            var thingo = $('<div />');
            //populate thingo with a bunch of divs matching selector1
            $(selector2).append(thingo);
    }
    loadInit();
    hideInit();
});

我正在解析一些数据并用它在loadInit 中填充DOM，然后我希望.hide 刚刚创建的DOM 中存在的与selector1 匹配的每个元素。

不幸的是元素没有被隐藏 - 我在这里做错了什么？

谢谢！

解决方案

正如许多人所建议的那样，我的选择器并不正确，但这是我调用函数的顺序。为了保证hideInit 在loadInit 完成后运行，我在loadInit 的内部调用它。

$(document).ready( function () {
    var hideInit = function () {
            $(selector1).hide();
    }
    var loadInit = function () {
            //get data
            var thingo = $('<div />');
            //populate thingo with a bunch of divs matching selector1
            $(selector2).append(thingo);
            hideInit();
    }
    loadInit();
});

感谢您的 cmets/ 回答！

【问题讨论】：

如果你把 alert($('selector1').length;);作为 hideInit 的第一行？
$('div') 不是正确的构造函数，您需要使用 $('<div/>') 来执行该追加。
你的意思是var thingo = $('<div>');，对吧？
也许您也可以将您的 html 文件提供给我们，以便我们了解您想要做什么？ ;) 我不明白 selector1 和 selector2 是什么。是那些课吗？在这种情况下，您应该在前面加上 .。
请提供一些更好的例子...您的例子似乎留下了一些问题。

标签： javascript jquery

【解决方案1】：

这可以通过使用append、filter 和hide jQuery 方法操纵DOM 的一行来实现。

$('selector2').append(thingo) - 追加项目
.filter('selector1') - 原始选择器，只选择匹配过滤器的那些
.hide() - 隐藏过滤的项目

像这样：

$(function()
{
    var thingo = $('<div />');
    $('selector2').append(thingo).filter('selector1').hide();
}

或者，如果您想隐藏附加的项目，您需要在filter 之后添加一个附加链，您可以使用find() 方法，如下所示：

// this will hide all child divs, so you may want to be more specific
$('selector2').append(thingo).filter('selector1').find('div').hide();

【讨论】：

@Richard：是的，这行得通。在我的情况下，实际的解决方案是将调用hideInit();放在loadInit函数的末尾，这样就可以保证按顺序调用它。

【解决方案2】：

这里有一些有用的东西。我不确定这是否是您尝试实现的目标。无论如何，示例在这里：http://jsfiddle.net/dyNbw/

js:

$(document).ready( function () {
    var hideInit = function () {
            $('.name1').hide();
    }
    var loadInit = function () {
            //get data
            var thingo = $('<div>Hi there</div>');
            //populate thingo with a bunch of divs matching selector1
            $('.name2').append(thingo);
    }
    loadInit();
    hideInit();
});

和html：

<div class="name1">This will be hidden</div>
<div class="name2"><span>I want to say:</span></div>

【讨论】：