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





تحميل مكتبة (25)


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

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

if ($(selector).length > 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);



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

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



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




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

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

if(document.querySelector('.a-class')) {
  // do something
}



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

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



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

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

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



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

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



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

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



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

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



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

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




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

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

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

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

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



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

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



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

if (document.getElementById('element_id')) {
    // Do something
}

تستغرق الكتابة فترة أطول قليلاً من طول jQuery البديل ، ولكنها تنفذ أسرع لأنها طريقة JS أصلية.

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

ملاحظة: لاحظ عدم وجود '#' قبل element_id (نظرًا لأن هذا JS عادي ، وليس jQuery).




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

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






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

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

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




ليس هناك حاجة لجاكري حقا. باستخدام جافا سكريبت عادي ، يكون من الأسهل والصحيح على الدلالة التحقق من:

if(document.getElementById("myElement")) {
    //Do something...
}

إذا كنت لا تريد وضع معرف لعنصر لأي سبب ، فلا يزال بإمكانك استخدام أي طريقة JavaScript أخرى مصممة للوصول إلى DOM.

jQuery هو رائع حقا ، ولكن لا تدع جافا سكريبت نقية الوقوع في غياهب النسيان ...




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

jQuery.contains( container, contained )

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

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




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

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

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




في JavaScript ، كل شيء "صواب" أو "falsy" ، وبالنسبة للأرقام 0 (و NaN) يعني false ، كل شيء آخر true . حتى تتمكن من الكتابة:

if ($(selector).length)

أنت لست بحاجة إلى ذلك >0 جزء.




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

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

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




استمع إلى البودكاست JavaScript Jabber: Episode # 32 الذي يتميز بالمبدعين الأصليين لـ AngularJS: Misko Hevery & Igor Minar. يتحدثون كثيرًا حول ما يشبه القدوم إلى AngularJS من خلفيات جافا سكريبت الأخرى ، وخاصة jQuery.

إحدى النقاط الواردة في البودكاست جعلت الكثير من الأشياء تنقر فوقي بالنسبة لسؤالك:

MISKO : [...] واحدة من الأشياء التي فكرت في بالكاد في Angular ، كيف يمكننا توفير الكثير من hatch الهروب بحيث يمكنك الخروج وأساسا معرفة طريقة للخروج من هذا. بالنسبة لنا ، فإن الجواب هو هذا الشيء الذي يطلق عليه "التوجيهات". ومع التوجيهات ، فإنك تصبح جوهريا جافا سكريبت jQuery عادي ، يمكنك القيام بكل ما تريد.

IGOR : لذلك فكر في التوجيه كتعليمات إلى المحول البرمجي الذي يخبره عندما تصادف هذا العنصر المعين أو هذا CSS في القالب ، وتحافظ على هذا النوع من الكود وهذا الرمز هو المسؤول عن العنصر وكل شيء أسفل هذا العنصر في شجرة DOM.

نص النسخة الكاملة متاح على الرابط المقدم أعلاه.

لذا ، للإجابة على سؤالك بشكل مباشر: AngularJS -رائع-هو إطار MV * حقيقي. ومع ذلك ، لا يزال بإمكانك تنفيذ جميع الأشياء الرائعة حقًا التي تعرفها وتحبها باستخدام jQuery داخل التوجيهات. إنها ليست مسألة "كيف أفعل ما اعتدت عليه في jQuery؟" بقدر ما يتعلق الأمر بـ "كيف أقوم بتضمين AngularJS مع كل الأشياء التي اعتدت القيام بها في jQuery؟"

انها حقا دولتين مختلفتين جدا للعقل.







javascript jquery