javascript - مكتبة - هل توجد وظيفة "موجودة" لـ jQuery؟




تحميل مكتبة jquery (20)

أرى أن معظم الإجابات هنا ليست دقيقة كما ينبغي ، فهي تتحقق من طول العنصر ، ويمكن أن يكون الأمر مقبولًا في كثير من الحالات ، ولكن ليس 100٪ ، تخيل لو تمرر الرقم إلى الدالة بدلاً من ذلك ، لذا فأنا أقدم نموذجًا على وظيفة تحقق من جميع الشروط وإرجاع الإجابة كما ينبغي:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

سيتحقق هذا من الطول والنوع ، والآن يمكنك التحقق من الأمر بهذه الطريقة:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true

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

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

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

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


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

    $.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/


إذا كنت تستخدم

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

قد تعني أن التسلسل ممكن عندما لا يكون.

سيكون هذا أفضل:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

بدلا من ذلك ، من الأسئلة الشائعة :

if ( $('#myDiv').length ) { /* Do something */ }

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

if ( $('#myDiv')[0] ) { /* 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);

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

$.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

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

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

كان لدي قضية حيث كنت أرغب في معرفة ما إذا كان هناك كائن موجود داخل آخر لذلك أضفت شيئا إلى الإجابة الأولى للتحقق من وجود محدد داخل المحدد.

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

كيف حول:

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

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

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


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

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

لقد وجدت if ($(selector).length) {} غير كافٍ. سيؤدي ذلك إلى تعطيل تطبيقك بصمت عندما يكون selector كائنًا فارغًا {} .

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

اقتراحي الوحيد هو إجراء فحص إضافي لـ {} .

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

ما زلت أبحث عن حل أفضل على الرغم من أن هذا واحد ثقيل بعض الشيء.

تحرير: تحذير! هذا لا يعمل في IE عندما يكون selector عبارة عن سلسلة.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

مستوحاة من الجواب hiway أتيت مع ما يلي:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

$.contains() يأخذ عنصرين DOM ويتحقق مما إذا كان الأول يحتوي على الثاني.

باستخدام document.documentElement كالوسيطة الأولى يفي بدلالات الأسلوب exists عندما نريد تطبيقه فقط للتحقق من وجود عنصر في الوثيقة الحالية.

في الأسفل ، لقد قمت jQuery.exists() قصاصة تقارن jQuery.exists() مقابل $(sel)[0] و $(sel).length تقترب من كلاهما بإرجاع قيم truthy لـ $(4) بينما $(4).exists() ترجع false . في سياق التحقق من وجود عنصر في DOM ، يبدو أن هذا هو النتيجة المرجوة .

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }
td { border: 1px solid black }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>



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

jQuery.contains( container, contained )

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

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


هنا هي طريقة exist المفضلة في jQuery

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

والإصدار الآخر الذي يدعم رد الاتصال عندما لا يكون المحدد موجودًا

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

مثال:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

يمكن استخدام هذا البرنامج المساعد في عبارة 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    */
    }
})

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

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

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

if ($(selector).is('*')) {
  // Do something
}

قليلا أكثر أناقة ، ربما.


يمكنك التحقق من وجود عنصر أو عدم استخدام الطول في برنامج جافا سكريبت. إذا كان الطول أكبر من الصفر ، فسيكون العنصر موجودًا إذا كان الطول صفراً فلا يكون العنصر موجودًا

// These by Id
if( $('#elementid').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

// These by Class
if( $('.elementClass').length > 0){
  // Element is Present
}else{
  // Element is not Present
}

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

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

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

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

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

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




jquery