[javascript] هل توجد وظيفة "موجودة" لـ jQuery؟



Answers

نعم فعلا!

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

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

هذا هو ردا على: بودكاست رمز الرث مع جيف اتوود

Question

كيف يمكنني التحقق من وجود عنصر في jQuery؟

الرمز الحالي الذي لدي هو:

if ($(selector).length > 0) {
    // Do something
}

هل هناك طريقة أكثر أناقة للتعامل مع هذا؟ ربما المساعد أو وظيفة؟




هل $.contains() ما تريده؟

jQuery.contains (حاوية ، محتواة)

ترجع طريقة $ .contains () true إذا كان عنصر DOM المقدم بواسطة الوسيطة الثانية هو سليل عنصر DOM المقدم بواسطة الوسيطة الأولى ، سواء كان طفلاً مباشراً أو متداخلاً بشكل أكثر عمقاً. خلاف ذلك ، فإنها ترجع كاذبة. يتم دعم عُقد العنصر فقط ؛ إذا كانت الوسيطة الثانية عبارة عن عقدة نصية أو تعليق ، فستعرض $ .contains () false.

ملاحظة : يجب أن تكون الوسيطة الأولى عنصر DOM ، وليس كائن jQuery أو كائن جافا سكريبت عادي.




يمكنك استخدام هذا:

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}



السبب في أن جميع الإجابات السابقة تتطلب أن .length المعلمة .length هي أنها تستخدم في الغالب محدد $() jquery $() الذي يحتوي على querySelector كل الخلفيات (أو يستخدمها مباشرة). هذه الطريقة بطيئة نوعًا ما لأنها تحتاج إلى تحليل شجرة DOM بالكامل بحثًا عن كل التطابقات مع ذلك المحدد وتعبئة مصفوفة بها.

لا تكون المعلمة ['length'] مطلوبة أو مفيدة ، وسوف تكون الشفرة أسرع بكثير إذا كنت تستخدم document.querySelector(selector) بدلاً من ذلك ، لأنها تقوم بإرجاع العنصر الأول الذي يطابقه أو لا يتم العثور عليه إذا لم يتم العثور عليه.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

لكن هذه الطريقة تتركنا مع الكائن الفعلي الذي يتم إرجاعه. وهو أمر جيد إذا لم يتم حفظه كمتغير واستخدامه بشكل متكرر (وبالتالي الحفاظ على المرجع إذا نسينا).

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

في بعض الحالات قد يكون هذا مرغوبًا. يمكن استخدامه في حلقة for مثل هذا:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

إذا كنت لا تحتاج بالفعل إلى العنصر وترغب في الحصول على / تخزين فقط صحيح / خطأ ، فقط لا مضاعفة! وهو يعمل للأحذية التي تأتي غير مشروطة ، فلماذا عقدة هنا؟

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);



يمكن استخدام هذا البرنامج المساعد في عبارة if مثل if ($(ele).exist()) { /* DO 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') {
                    var exist =  ele.length > 0 ? true : false;
                    if (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 {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.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 أخرى!

على سبيل المثال الاستخدامات

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})



التحقق من وجود عنصر موثق بدقة في الموقع الرسمي jQuery نفسه!

استخدم خاصية .length لمجموعة jQuery التي تم ارجاعها بواسطة المحدد:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

لاحظ أنه ليس من الضروري دائمًا اختبار ما إذا كان هناك عنصر موجود أم لا. ستعرض التعليمة البرمجية التالية العنصر إذا كانت موجودة ، ولا تفعل أي شيء (بدون أخطاء) إذا لم:

$("#myDiv").show();



أنا أستخدم هذا:

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

تنفيذ السلسلة فقط في حالة وجود عنصر jQuery - http://jsfiddle.net/andres_314/vbNM3/2/




يمكنك استخدام هذا:

// if element exists
if($('selector').length){ /* do something */ }
// if element does not exist
if(!$('selector').length){ /* do something */ }



جرّب اختبار عنصر DOM

if (!!$(selector)[0]) // do stuff



كيف حول:

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

إنه صغير للغاية ويوفر عليك إحاطة المحدد بـ $() كل مرة.




if ( $('#myDiv').size() > 0 ) { //do something }

يحسب size() عدد العناصر التي تم إرجاعها بواسطة المحدد




لا يتعين عليك التحقق مما إذا كانت أكبر من 0 مثل $(selector).length > 0 ، $(selector).length هي كافية وطريقة أنيقة للتحقق من وجود العناصر. لا أعتقد أن ذلك يستحق أن أكتب وظيفة فقط لهذا ، إذا كنت تريد أن تفعل المزيد من الأشياء الإضافية ، نعم.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}



يمكنك حفظ بعض وحدات البايت بالكتابة:

if ($(selector)[0]) { ... }

يعمل هذا لأن كل كائن jQuery يتنكر أيضًا كصفيف ، لذلك يمكننا استخدام عامل إلغاء تجزئة الصفيف للحصول على العنصر الأول من الصفيف . تقوم بإرجاع undefined إذا لم يكن هناك عنصر في الفهرس المحدد.




$(selector).length && //Do something



تعثرت على هذا السؤال وأريد مشاركة مقتطف من الشفرة التي أستخدمها حاليًا:

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

والآن يمكنني كتابة كود مثل هذا -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

قد يبدو كثيرًا من الكود ، ولكن عند كتابته في CoffeeScript ، فهو صغير جدًا:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists





Related