Question

我知道您可以使用.length轻松检查“存在”的任何选择器 - 但是我遇到了问题，我相信这是因为我正在寻找的特定选择器是使用jQuery创建的 - 我的理解是，使用jQuery无法选择在DOM加载时未加载的元素。这是对的吗？

请参阅此代码，该代码执行以下操作：

在#menu-item-18
仅当屏幕尺寸小于（或=）768px

这很好用

$(function() {
    $(window).on('resize', function() {
        if($(window).width() <= 768){
                $('<div class="menu-icon">hello</div>').insertBefore( "#menu-item-18 a" ); 
        }
    }).trigger('resize');
});

问题是，当函数不断检查浏览器宽度时，它会不断地插入div。您可以通过在JSFiddle：http://jsfiddle.net/franhaselden/0uwx28rL/2/

中调整大小来看到这一点

因此我想在插入div之前添加一个检查，以查看是否存在任何.menu-icon。如果它已经存在，请不要添加它。

所以我尝试了以下代码，请注意在此示例中，它首先使用.length检查.menu-icon，然后运行插入代码。但它不起作用：http://jsfiddle.net/franhaselden/0uwx28rL/3/

$(function() {
    $(window).on('resize', function() {
        if($(window).width() <= 768){
           if ($('.menu-icon').length){
                $('<div class="menu-icon">hello</div>').insertBefore( "#menu-item-18 a" ); 
            }
        }
    }).trigger('resize');
});

如何让上述代码生效？

还有其他选择吗？如果浏览器宽度低于768px，我还能如何添加一些自定义HTML，还有更好的方法吗？

Answer 1

如果计数为0，您只想添加它（您正在测试非零，因此它永远不会输入该代码）：

e.g。

if ($('.menu-icon').length == 0)

或只是

if (!$('.menu-icon').length)

http://jsfiddle.net/TrueBlueAussie/0uwx28rL/4/

基本问题是length检查，但正如@C Bauer建议您最好使用添加元素的唯一ID而不是类。这允许代码与现有的.menu-icon元素一起使用（无需知道已有多少元素）。

Answer 2

只需添加ID并在决定追加之前检查它：

http://jsfiddle.net/0uwx28rL/5/

$(function() {
    $(window).on('resize', function() {
        if($(window).width() <= 768){
            if($("#smallMenu").length == 0){
                $('<div id="smallMenu" class="menu-icon">hello</div>').insertBefore( "#menu-item-18 a" ); 
            }
        }
    }).trigger('resize');
});

在运行之前检查特定选择器是否存在 - 使用jQuery创建选择器

2 个答案: