Question

所以我试图在变量中存储一个jQuery选择器，但是当我使用它时我的代码不能正常工作，但是当我直接输入选择器时它可以工作。

这里的代码不起作用：

$(function(){
    selector = $('.mtitle');

    for (var i=0; i<10; i++){
        $('div').append('<h1 class="mtitle">Loading...</h1>');
    }
    for (var j=0; j<10; j++){
        selector.html("hi");
    }
});

以下是有效的代码：

$(function(){
    selector = $('.mtitle');

    for (var i=0; i<10; i++){
        $('div').append('<h1 class="mtitle">Loading...</h1>');
    }
    for (var j=0; j<10; j++){
        $('.mtitle').html("hi");
    }
});

我在这里做错了什么？

由于

Answer 1

在变量中缓存jquery选择器时，它会存储返回的当前jquery对象。因此，当您第一次缓存变量时，DOM中没有.mtitle元素，因为稍后添加它们。它不仅仅是一个错误，而是一个你所面临的概念性问题！

Answer 2

我的意图并不完全清楚，但我相信您希望将所有Loading...替换为hi。但是当你这样称呼时：

selector = $('.mtitle');

您尚未存储选择器，而是匹配选择器的一组元素。当您使用以下代码追加更多与选择器匹配的元素时：

$('div').append('<h1 class="mtitle">Loading...</h1>');

原始selector变量不会包含对新h1元素的引用，因为已经执行了选择。

第二个代码有效，因为匹配元素的选择是在创建新元素之后完成的。

但如果您删除了第二个for循环，它也可以正常工作，因为此调用实际上用<{1}}替换每个 .mtitle的内容：

hi

Answer 3

其他人已经描述了为什么它不起作用，但这是你需要改变以使其工作

$(function(){
    selector = '.mtitle'; // the actual selector, not the object(s)

    for (var i=0; i<10; i++){
        $('div').append('<h1 class="mtitle">Loading...</h1>');
    }
    for (var j=0; j<10; j++){
        $(selector).html("hi"); // search the DOM as it is now using the selector
    }
});

将jQuery选择器存储到变量中是不行的？

3 个答案: