jQuery判断页面上是否存在元素

Question

如何确定页面上是否存在某个元素...例如...

$('select[name="modifier_option"]')

如果这个选择框在屏幕上存在，我需要验证它的值是否大于0以确保它的值是正确的，但如果它不存在，我就不需要担心它。

- Ben

---

在这里更好地解释了 - https://dev59.com/ZnVD5IYBdhLWcg3wR5go - Sarang Patel

Answer 1

    if( $('select[name="modifier_option"]').length )
{
     // it exists
}

- Shawn

Answer 2

从这里复制/粘贴：jQuery是否有"exists"函数？

jQuery没有内置的"exists"函数，但是可以使用以下代码来检查元素是否存在：

if ($(selector).length) {
    // do something
}

这个代码片段将返回一个代表元素存在与否的布尔值。如果元素存在，它将被解释为true，否则为false。

jQuery.fn.exists = function(){return jQuery(this).length>0;}

if ($(selector).exists()) {
    // Do something
}

- Silver Light

---

读取下面回答的注释。if ($(selector).length) 是更好的解决方案。 - Šime Vidas

Answer 3

我曾经回答过这个问题，使用以下插件这里。请访问答案以获取有关创建插件的完整详细信息。

---

以下插件将允许您使用回调功能（与jQuery样式标记保持一致），如果元素存在。因此，对于您的示例，您可以执行以下操作：

$('select[name="modifier_option"]').exist(function() {
    if ($(this).val() > 0) {
        /*  DO WORK */
    }
    else {
        /*  is not greater than 0
            DO OTHER WORK   */
    }
})

插件

(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {    //  has at least one Callback Method
                    var exist =  ele.length > 0 ? true : false; //  strict setting of boolean
                    if (exist) {    // Elements do exist
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {  //  has NO callback method, thus return if exist or not based on element existant length
                    if (ele.length <= 1) return ele.length > 0 ? true : false; //   strict return of boolean
                    else return ele.length; //  return actual length for how many of this element exist
                }

                return false; //    only hits if something errored!
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

的意思是：

在这个网页里加入一个指向 jsFiddle 的链接。

- SpYk3HH

---

你能更好地解释一下你的版本，比“正常”的!!jQuery("selctor").length更好吗？（直接使用此代码或将其作为.exists()的返回值） - nbar

@nbar，如果你喜欢的话，可以简单地使用if检查。我的插件建议可能不是“更好”，而是“更受欢迎”，因为它在继续的jQuery标记中提供了可读性。它还提供了回调功能，因此在上面的示例中使用。单个回调仅在元素存在时才会触发，从而用典型的jQuery标记替换了!!或if检查。另外，如果在参数中添加第二个回调，则会在元素不存在时触发。 - SpYk3HH

@nbar 我还应该提到，你仍然可以使用 !!jQuery("selector").exist() 并简单地获得一个 BOOLEAN 返回值，或者，如果你选择使用第一个回调参数，那么你就可以保持 jQuery 的链式调用。因此，你可以继续对 现有的 元素进行调用。例如：$('selector').exist(function(){/*dowork*/}).css('color', 'red') 如果你想知道为什么我没有只让 .exist() 返回元素，那是因为这样做没有意义。如果你要以这种方式使用它来实现链式调用，那么你甚至不需要它。你可以直接进行调用。 - SpYk3HH

嗯，我并没有看到任何真正的案例。if(!!jQuery("selector").length) { do1() } else do2() }与$('selector').exist(do1(), do2()}相比，我必须说我更喜欢前者，因为你直接可以看到发生了什么。此外，$('selector').exist().css("do", "something")与$('selector').css("do", "something")作用相同。而您的函数可以返回长度（int），而int没有.css()函数。 - nbar

如果你和不熟悉JS的人一起工作，那么使用 if(jQuery("selector").exist()) { do1() } else do2() } 是可以的。这是我能想到的唯一情况。也许你可以给我展示更多例子？ - nbar

@nbar "虽然您的函数可以返回长度（一个整数），但int类型没有.css()函数。" 您没有完全阅读吗？我已经给出了答案。如果您想了解更多，请单击链接查看我的原始答案发布并获取更多信息。 - SpYk3HH