【问题标题】:jQuery determining if element exists on pagejQuery确定页面上是否存在元素
【发布时间】:2011-05-14 13:28:48
【问题描述】:

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

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

如果屏幕上存在该选择框,我需要在页面上验证它的值以确保它的值 > 0,但如果它不存在,我无需担心。

【问题讨论】:

标签: javascript jquery


【解决方案1】:
    if( $('select[name="modifier_option"]').length )
{
     // it exists
}

【讨论】:

    【解决方案2】:

    从这里复制/粘贴:Is there an "exists" function for jQuery?

    jQuery.fn.exists = function(){return jQuery(this).length>0;}
    
    if ($(selector).exists()) {
        // Do something
    }
    

    【讨论】:

    • 阅读该答案下方的 cmets。 if ($(selector).length) 是更好的解决方案。
    【解决方案3】:

    我用以下插件here 回答了同样的问题。有关创建插件的完整详细信息,请访问答案。


    如果元素存在,以下插件将允许您使用回调功能(与 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

    【讨论】:

    • 你能解释一下你的版本比“正常”!!jQuery("selctor").length 更好吗? (直接使用或将其作为 .exists() 的返回值)
    • @nbar,如果你愿意,你可以简单地使用 if 检查。我的插件建议可能不如“prefered”那样“更好”,因为它在继续jQuery标记中提供了可读性。它还提供回调功能,因此在我上面的示例中使用。 single 回调只会在元素 exist 时触发,因此将 !!if 检查替换为 typical jQuery 标记。另一方面,如果在参数中添加第二个回调,如果元素不存在,它将触发。
    • @nbar 我还应该提一下,您仍然可以将其用作!!jQuery("selector").exist() 并且只需返回BOOLEAN,如果您选择使用第一个回调参数,然后您维护 jQuery 可链接性。因此,您可以继续调用 现有 元素。例如:$('selector').exist(function(){/*dowork*/}).css('color', 'red') 如果你想知道我不只有.exist() 返回元素,那是因为它不会从那时起。如果您打算以这种方式使用它来实现可链接性,那么您甚至不需要它。您只需拨打电话即可。
    • 嗯,我没有看到任何真实的案例。 if(!!jQuery("selector").length) { do1() } else do2() }$('selector').exist(do1(), do2()}。我不得不说我更喜欢第一个,你直接看到会发生什么。 $('selector').exist().css("do", "something")$('selector').css("do", "something") 也一样。虽然您的函数可以将长度(一个 int)作为返回值,但 int 没有函数 .css()
    • 如果您与不熟悉 JS 的人一起工作,if(jQuery("selector").exist()) { do1() } else do2() } 会很好。这是我看到的唯一案例。也许你可以给我看更多?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-23
    • 2020-01-31
    • 1970-01-01
    • 2018-09-19
    • 1970-01-01
    • 2011-12-15
    相关资源
    最近更新 更多