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




15 Answers

نعم فعلا!

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

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

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

javascript jquery

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

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

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

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




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

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



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

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

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




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



أرى أن معظم الإجابات هنا ليست دقيقة كما ينبغي ، فهي تتحقق من طول العنصر ، ويمكن أن يكون الأمر مقبولًا في كثير من الحالات ، ولكن ليس 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: '', url: 'http://www..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



السبب في أن جميع الإجابات السابقة تتطلب أن .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);



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

// 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
}



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



هذا يشبه إلى حد كبير جميع الإجابات ، ولكن لماذا لا تستخدم ! عامل التشغيل مرتين حتى تتمكن من الحصول على قيمة منطقية:

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

if ($(selector).exists()) {
    // the element exists, now what?...
}



مستوحاة من الجواب 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>




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

// 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
}

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




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

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




يعطي $("selector" ) كائن يحتوي على بيانات length . إذا كانت هناك عناصر كما تحددها في المحدد ، فسوف تحصل عليها من الكائن. لذلك إذا قمت بفحص طوله الذي يمكن أن تجده allready ، هل يوجد أي عنصر موجود. في javascript 0 == false أيضًا null == false . إذا لم تحصل على 0 سيتم تشغيل الرموز الخاصة بك.

if($("selector").length){
   //code in the case
} 



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

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



Related