هل هناك وظيفة "موجود" لـ jQuery؟

Question

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

الكود الحالي الذي لدي هو هذا:

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

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

Answer 1

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

if ($(selector).length)

لا تحتاج لذلك >0 جزء.

Answer 2

نعم!

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

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

وهذا رداً على: بودكاست Herding Code مع جيف أتوود

Answer 3

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

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

Answer 4

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

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

---

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

Answer 5

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

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

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

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

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

Answer 6

يمكنك حفظ بعض البايتات عن طريق الكتابة:

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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

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

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

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

Answer 11

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

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

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

Answer 12

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

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

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

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

/* 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);

Answer 13

لقد وجدت 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

Answer 14

يكون $.contains() ما تريد؟

jQuery.contains( container, contained )

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

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

Answer 15

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

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

Answer 16

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

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

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

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

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

Answer 17

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

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

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

Answer 18

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

Answer 19

حاول إجراء اختبار ل DOM عنصر

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

Answer 20

مستوحاة من إجابة هايواي توصلت إلى ما يلي:

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

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

استخدام document.documentElement لأن الحجة الأولى تستوفي دلالات 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>

Answer 21

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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

Answer 22

ليست هناك حاجة لمسج

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

Answer 23

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

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

Answer 24

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

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

Answer 25

ماذا عن:

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

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

إنه بسيط جدًا ويوفر عليك الاضطرار إلى إحاطة المحدد به $() كل مرة.

Answer 26

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

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

Answer 27

هنا هو المفضل لدي 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
    }
);

Answer 28

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

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

Answer 29

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

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

حل نهائي

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist

Answer 30

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

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