มีฟังก์ชั่น "มีอยู่" สำหรับ jQuery หรือไม่?


2778

ฉันจะตรวจสอบการมีอยู่ขององค์ประกอบใน jQuery ได้อย่างไร?

รหัสปัจจุบันที่ฉันมีคือ:

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

มีวิธีที่สง่างามกว่าในการเข้าถึงสิ่งนี้หรือไม่? บางทีอาจเป็นปลั๊กอินหรือฟังก์ชั่น?

คำตอบ:


2489

ใน JavaScript ทุกอย่างเป็น 'truthy' หรือ 'falsy' และสำหรับตัวเลข0(และน่าน) หมายถึงทุกอย่างอื่นfalse trueดังนั้นคุณสามารถเขียน:

if ($(selector).length)

คุณไม่ต้องการ>0ส่วนนั้น


52
@ abhirathore2006 หากคุณใช้ตัวเลือก id และองค์ประกอบไม่มีอยู่ความยาวคือ 0 และไม่ส่งข้อยกเว้น
Robert

14
ที่น่าสนใจNaN != falseนั่นเอง
Robert

35
@Robert และ[] + []= ""... อ่าฉันรักจาวาสคริปต์
James

9
@James นั่นเป็นเพราะและ[].toString() === [].join(',') === "" "" === ""
Ismael Miguel

5
@Robert และtypeof NaN == 'number'
oriadam

1356

ใช่

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

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

นี่คือการตอบสนองต่อ: Herding Code podcast กับ Jeff Atwood


254
ฉันเพิ่งเขียน: ถ้า ($ (ตัวเลือก). ความยาว) {... } โดยไม่มี '> 0'
vsync

369
$.fn.existsตัวอย่างของคุณกำลังแทนที่การค้นหาคุณสมบัติ (ราคาถูก!) ด้วยการเรียกใช้ฟังก์ชันสองครั้งซึ่งมีราคาแพงกว่ามากและการเรียกฟังก์ชันหนึ่งในนั้นจะสร้างวัตถุ jQuery ที่คุณมีอยู่แล้วซึ่งเป็นเพียงความโง่เขลา
C Snover

212
@redsquare: การอ่านรหัสเป็นเหตุผลที่ดีที่สุดสำหรับการเพิ่มฟังก์ชั่นประเภทนี้ใน jQuery มีสิ่งที่เรียกว่า.existsอ่านอย่างสะอาดตาในขณะที่.lengthอ่านเป็นสิ่งที่แตกต่างกันทางความหมายถึงแม้ว่าความหมายตรงกับผลลัพธ์ที่เหมือนกัน
Ben Zotto

48
@quixoto ขออภัย แต่. ความยาวเป็นมาตรฐานในหลายภาษาที่ไม่จำเป็นต้องมีการตัดคำ คุณตีความอีกต่อไปอย่างไร
redsquare

144
ในความคิดของฉันอย่างน้อยก็มีเหตุผลทางอ้อมอย่างหนึ่งจากแนวคิดของ "ความยาวของรายการที่มากกว่าศูนย์" กับแนวคิดของ "องค์ประกอบ (s) ที่ฉันเขียนตัวเลือกให้มีอยู่" ใช่พวกเขาเป็นสิ่งเดียวกันทางเทคนิค แต่แนวคิดนามธรรมอยู่ในระดับที่แตกต่างกัน สิ่งนี้ทำให้บางคนต้องการตัวบ่งชี้ที่ชัดเจนยิ่งขึ้นแม้ในบางค่าใช้จ่าย
Ben Zotto

377

ถ้าคุณใช้

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

11
วิธีแรกอ่านดีกว่า $ ("a"). exist () อ่านว่า "ถ้ามี <a> องค์ประกอบ" $ .exists ("a") อ่านว่า "หากมี <a> องค์ประกอบ"
แปลกหน้า

16
จริง แต่อีกครั้งคุณหมายถึงว่าการผูกมัดเป็นไปได้และถ้าฉันพยายามทำบางอย่างเช่น $ (selector) .exists (). css ("color", "red") มันไม่ทำงานแล้วฉันจะ = * (
Jon Erickson

19
มีวิธีการที่ไม่สามารถโยงได้เช่นฟังก์ชั่น attr และ data ฉันเห็นประเด็นของคุณและสำหรับสิ่งที่คุ้มค่าฉันแค่ทดสอบความยาว> 0 ต่อไป
Matthew Crumley

39
ทำไมบนโลกนี้คุณต้องเชื่อมโยงสิ่งนี้? $(".missing").css("color", "red")สิ่งที่ถูกต้องแล้ว… (ไม่มีอะไร)
Ben Blank

15
สิ่งที่เกี่ยวกับการผูกมัดเป็น tosh สมบูรณ์ - มีวิธีการjQuery มากมาย$.fnที่ส่งคืนสิ่งอื่นนอกเหนือจากวัตถุ jQuery ใหม่และดังนั้นจึงไม่โยงกัน
Alnitak

136

คุณสามารถใช้สิ่งนี้:

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

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

134
คุณไม่เห็นว่า Tim Büthe ตอบคำถามนี้มา2 ปีแล้วใช่ไหม?
Th4t Guy

101
Pfft, Tim ไม่เคยแสดงวิธีทดสอบว่าองค์ประกอบนั้นไม่มีอยู่จริงหรือไม่
Jeremy W

1
คุณหมายถึงชีวิต "อื่น ๆ "? คำถามของฉันคือ: ผิดพลาดต้องมีอยู่หรือตัวเลือกไม่ตรงกัน ความยาวไม่จำเป็น
RichieHH

26
คำตอบและความคิดเห็นนี้สรุปผลการทำงานของ stackoverflow
aswzen

101

วิธีที่เร็วที่สุดและมีความหมายมากที่สุดในการอธิบายการตรวจสอบการมีอยู่ของตัวมันเองคือการใช้ธรรมดาJavaScript:

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

มันยาวกว่าการเขียนเล็กน้อยกว่าทางเลือกความยาว jQuery แต่ดำเนินการได้เร็วขึ้นเนื่องจากเป็นเมธอด JS ดั้งเดิม

และดีกว่าทางเลือกในการเขียนjQueryฟังก์ชั่นของคุณเอง ทางเลือกนั้นช้าลงด้วยเหตุผลที่ @snover ระบุไว้ แต่ก็ยังจะให้เขียนโปรแกรมอื่น ๆ การแสดงผลที่exists()ฟังก์ชั่นเป็นสิ่งที่ธรรมชาติเพื่อ jQuery JavaScriptผู้อื่นจะ / ควรเข้าใจโค้ดของคุณโดยไม่ต้องเพิ่มหนี้ความรู้

หมายเหตุ:สังเกตเห็นการขาด '#' ก่อนหน้าelement_id(เนื่องจากนี่เป็น JS ธรรมดาไม่ใช่jQuery)


56
ไม่เหมือนกันทั้งหมด เตอร์ JQuery สามารถนำมาใช้สำหรับกฎ CSS ใด ๆ - $('#foo a.special')ตัวอย่างเช่น และมันสามารถคืนองค์ประกอบได้มากกว่าหนึ่งองค์ประกอบ getElementByIdไม่สามารถเริ่มวิธีการนั้นได้
kikito

7
คุณถูกต้องเนื่องจากไม่สามารถใช้งานได้อย่างกว้างขวางในฐานะตัวเลือก อย่างไรก็ตามมันทำงานได้ค่อนข้างดีในกรณีที่พบบ่อยที่สุด (ตรวจสอบว่ามีองค์ประกอบเดียว) ข้อโต้แย้งของการอธิบายตนเองและความเร็วยังคงมีอยู่
Magne

29
@Noz if(document.querySelector("#foo a.special"))จะทำงานได้ ไม่จำเป็นต้องใช้ jQuery
Blue Skies

34
อาร์กิวเมนต์ของความเร็วในเครื่องมือ JS นั้นตายในใจของผู้ที่ไม่สามารถทำงานได้โดยไม่ต้อง jQuery เนื่องจากเป็นอาร์กิวเมนต์ที่พวกเขาไม่สามารถชนะ
Blue Skies

22
จำวันเก่า ๆ ที่ดีเมื่อ document.getElementById คือทั้งหมดที่เรามี และฉันก็ลืมเอกสารอยู่เสมอ และหาสาเหตุไม่ได้ว่าทำไมมันไม่ทำงาน และฉันสะกดผิดเสมอและทำให้ตัวละครผิด
JustJohn

73

คุณสามารถบันทึกไม่กี่ไบต์โดยการเขียน:

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

งานนี้เพราะแต่ละวัตถุ jQuery ยังปลอมตัวเป็นอาร์เรย์เพื่อให้เราสามารถใช้อาร์เรย์ dereferencing ผู้ประกอบการที่จะได้รับรายการแรกจากอาร์เรย์ มันจะส่งกลับundefinedถ้าไม่มีรายการที่ดัชนีที่ระบุ


1
ฉันมาที่นี่เพื่อโพสต์คำตอบที่แน่นอนนี้ ... ซอบังคับ: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak

3
@JasonWilczak สนใจที่จะแสดงความคิดเห็นว่าทำไมไม่แทน: .eq [0] หรือ. first () เพื่ออ้างถึงองค์ประกอบแรกที่พบมากกว่าการพิมพ์แบบหล่อ?
Jean Paul AKA el_vete

5
ไม่jQuery.first()หรือjQuery.eq(0)วัตถุทั้งสองคืนวัตถุนั้นเป็นความจริงแม้ว่าวัตถุนั้นจะว่างเปล่าก็ตาม ตัวอย่างนี้ควรแสดงให้เห็นว่าทำไมฟังก์ชั่นเหล่านี้จึงไม่สามารถใช้ได้ตามที่เป็นอยู่:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A

1
แก้ไข. .eq(0)ผลตอบแทนเพียงอีกหนึ่งวัตถุ jQuery ตัดทอนความยาว 1 หรือ 0. เป็นเพียงวิธีการที่สะดวกสบายสำหรับ.first() .eq(0)แต่.get(0)ผลตอบแทนที่ได้องค์ประกอบ DOM ครั้งแรกหรือครั้งและเป็นเช่นเดียวกับundefined [0]องค์ประกอบ DOM แรกในวัตถุ jQuery '0'ถูกเก็บไว้ในสถานที่ให้บริการปกติวัตถุที่มีชื่อ นั่นเป็นคุณสมบัติที่เข้าถึงได้ง่าย ประเภทเดียวหล่อเกิดจากการแปลงโดยนัยของจำนวนสตริง0 '0'ดังนั้นหากการหล่อแบบเป็นปัญหาคุณสามารถใช้$.find(selector)['0']แทนได้
Robert

66

คุณสามารถใช้ได้:

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

เล็ก ๆ น้อย ๆที่สง่างามมากขึ้นอาจจะ


38
นี่มันมากเกินไปสำหรับเรื่องง่าย ๆ เห็น Tim Bütheคำตอบ
vsync

นี่คือคำตอบที่ถูกต้อง วิธี 'ความยาว' มีปัญหาว่ามันให้ค่าบวกกับตัวเลขใด ๆ ตัวอย่างเช่น: $ (666) .length // ส่งคืน 1 แต่ไม่ใช่ตัวเลือกที่ถูกต้อง
earnaz

มันแพงมากสำหรับงานง่ายๆ เพียงแค่พิจารณาการใช้ jquery หาก. is () และคุณจะเห็นว่าจำเป็นต้องใช้โค้ดในการประมวลผลเพื่อตอบคำถามง่ายๆนี้เพียงใด นอกจากนี้ยังไม่ชัดเจนว่าคุณต้องการทำสิ่งใดดังนั้นจึงเหมือนกันหรืออาจดูสง่างามกว่า
micropro.cz

1
@earnaz จุดที่ดีจับดี ฉันไม่เห็นว่ามันเป็นเรื่องที่คุ้มค่าจริงหรือไม่ Devs การระบุองค์ประกอบที่666อาจมีเหตุผลอื่น ๆ อีกมากมายที่รหัสของพวกเขาเสีย ในขณะที่มันเป็นตัวเลือกที่ไม่ถูกต้อง แต่ $ (666) ความยาวเป็นจาวาสคริปต์ที่ถูกต้อง : มันจะประเมินความจริงดังนั้นจึงควรตรงตามเงื่อนไข
ทอดด์

@earnaz เพื่อหลีกเลี่ยงกรณีเฉพาะนั้นใช้$.find(666).lengthงานได้
Emile Bergeron

66

ปลั๊กอินนี้สามารถใช้ใน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    */
    }
})

1
ในเวอร์ชันโทรกลับการโทรกลับไม่ควรHas Itemsส่งผ่านวัตถุเป็นอาร์กิวเมนต์ใช่หรือไม่
Chris Marisic

62

ฉันเห็นคำตอบส่วนใหญ่ที่นี่ไม่ถูกต้องอย่างที่ควรจะเป็นพวกเขาตรวจสอบความยาวขององค์ประกอบมันสามารถตกลงได้ในหลาย ๆ กรณี แต่ไม่ใช่ 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

55

ไม่จำเป็นต้องใช้ jQuery จริงๆ ด้วย JavaScript ธรรมดามันง่ายกว่าและถูกต้องทางความหมายในการตรวจสอบ:

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

หากด้วยเหตุผลใดก็ตามที่คุณไม่ต้องการใส่รหัสในองค์ประกอบคุณยังสามารถใช้วิธี JavaScript อื่น ๆ ที่ออกแบบมาเพื่อเข้าถึง DOM

jQuery เจ๋งจริงๆ แต่อย่าปล่อยให้จาวาสคริปต์ที่บริสุทธิ์หลงลืมไป ...


5
ฉันรู้ว่า: มันไม่ตอบคำถามเดิมโดยตรง (ซึ่งขอฟังก์ชั่น jquery) แต่ในกรณีนั้นคำตอบจะเป็น "ไม่" หรือ "ไม่ใช่วิธีที่ถูกต้องทางความหมาย"
amypellegrini

เกิดอะไรขึ้นถ้าคุณต้องเลือกผู้ปกครอง:has()?
КонстантинВан

54

คุณสามารถใช้สิ่งนี้:

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

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

43

เหตุผลที่คำตอบก่อนหน้านี้ทั้งหมดต้องการ.lengthพารามิเตอร์ก็คือพวกเขาส่วนใหญ่ใช้$()ตัวเลือกของ jquery ซึ่งมี querySelectorAll อยู่หลังม่าน (หรือพวกเขากำลังใช้มันโดยตรง) วิธีนี้ค่อนข้างช้าเพราะมันต้องแยกแผนภูมิทรี 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 */

ในบางกรณีอาจต้องการ มันสามารถใช้ในการห่วงเช่นนี้:

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

40

คือ$.contains()สิ่งที่คุณต้องการ?

jQuery.contains( container, contained )

$.contains()วิธีการส่งกลับจริงถ้าองค์ประกอบ DOM ที่มีให้โดยอาร์กิวเมนต์ที่สองเป็นลูกหลานขององค์ประกอบ DOM ที่มีให้โดยอาร์กิวเมนต์แรกไม่ว่าจะเป็นเด็กตรงหรือซ้อนกันอย่างลึกซึ้งยิ่งขึ้น มิฉะนั้นจะส่งคืนค่าเท็จ สนับสนุนโหนดองค์ประกอบเท่านั้น ถ้าอาร์กิวเมนต์ที่สองเป็นข้อความหรือโหนดความคิดเห็น$.contains()จะกลับเท็จ

หมายเหตุ : อาร์กิวเมนต์แรกจะต้องเป็นองค์ประกอบ DOM ไม่ใช่วัตถุ jQuery หรือวัตถุ JavaScript ธรรมดา


3
สิ่งนี้ไม่ยอมรับตัวเลือกซึ่งหมายความว่าเขาจะต้องเลือกมันซึ่งหมายความว่าเขาสามารถตรวจสอบผลลัพธ์ของการเลือกของเขาได้

39

ฉันพบว่า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

12
คุณพบว่าตัวเองกำลังโทรหา$()ด้วยวัตถุที่ว่างเปล่าเป็นอาร์กิวเมนต์?
nnnnnn

@nnnnnn ไม่จริง (ฉันไม่ใช้ jQuery อีกต่อไป) แต่ฉันเดาว่าเมื่อ 3 ปีก่อนฉันมีกรณีของการเปิดเผย API ที่จะใช้ตัวเลือกและส่งกลับจำนวนองค์ประกอบสำหรับตัวเลือกนั้น หากผู้พัฒนารายอื่นส่งผ่านวัตถุที่ว่างเปล่ามันจะตอบกลับอย่างไม่ถูกต้องด้วย 1
Oleg

3
ทำไมคุณต้องผ่านวัตถุที่ว่างเปล่า{}ไปบนโลก$()?
คนงานทุกคนสำคัญเมื่อ

7
@cpburnz ทำไมคุณถามฉัน ฉันเป็นเพียงผู้ให้บริการ API ... ผู้คนส่งผ่านสิ่งที่โง่ไปสู่ ​​API ทุกประเภท
Oleg

4
เพิ่งสังเกตเห็นปัญหา jquery เธรดที่ @FagnerBrack ที่อ้างอิงได้รับการอัปเดตหลังจากความคิดเห็นของเขา ดูเหมือนว่ามันจะไม่หายไปไหน
โจเซฟกาเบรียล

38

คุณสามารถตรวจสอบองค์ประกอบที่มีอยู่หรือไม่ใช้ความยาวในจาวาสคริปต์ หากความยาวมากกว่าศูนย์จะมีองค์ประกอบอยู่หากความยาวเป็นศูนย์จะไม่มีองค์ประกอบอยู่

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

4
คุณไม่จำเป็นต้องตรวจสอบความยาวของสภาพอากาศมากกว่า 0 ถ้า ($ ('# elementid'). ความยาว) {} จะเพียงพอ
Pranav Labhe

13
คุณอ่านคำถามจริงหรือ เป็นวิธีเดียวกับที่ OP ใช้กันอยู่
A1rPun

34

การตรวจสอบการมีอยู่ขององค์ประกอบนั้นได้รับการบันทึกไว้ในเว็บไซต์ทางการของ jQuery!

ใช้คุณสมบัติ. lengthของคอลเล็กชัน jQuery ที่ส่งคืนโดยตัวเลือกของคุณ:

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

โปรดทราบว่าไม่จำเป็นเสมอไปที่จะทดสอบว่ามีองค์ประกอบอยู่หรือไม่ รหัสต่อไปนี้จะแสดงองค์ประกอบหากมีอยู่และไม่ทำอะไรเลย (โดยไม่มีข้อผิดพลาด) หากไม่มี:

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

31

นี่คล้ายกับคำตอบทั้งหมด แต่ทำไมไม่ใช้!โอเปอเรเตอร์สองครั้งเพื่อให้คุณได้บูลีน:

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

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

2
เพราะBoolean(x)สามารถบางครั้งมีประสิทธิภาพมากขึ้น

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

19
ฉันเกลียดวิธีที่ชาญฉลาดเหล่านี้ในการหลีกเลี่ยงการใช้จุดifที่ifควรปรับปรุงความสามารถในการอ่านค่า 2 ไบต์
Emile Bergeron

นอกจากนี้ตัวย่อจะทำสิ่งเหล่านี้&&ให้คุณ


27

ได้รับแรงบันดาลใจจากคำตอบของ hiwayฉันได้รับสิ่งต่อไปนี้:

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

jQuery.containใช้สององค์ประกอบ DOM และตรวจสอบว่าองค์ประกอบแรกมีองค์ประกอบที่สองหรือไม่

ใช้document.documentElementเป็นอาร์กิวเมนต์แรกตอบสนองความหมายของexistsวิธีการเมื่อเราต้องการใช้มันเพียงเพื่อตรวจสอบการดำรงอยู่ขององค์ประกอบในเอกสารปัจจุบัน

ด้านล่างนี้ผมได้รวบรวมข้อมูลโค้ดที่เปรียบเทียบjQuery.exists()กับ$(sel)[0]และ$(sel).lengthวิธีการที่ทั้งสองกลับมาtruthyค่า$(4)ในขณะที่ผลตอบแทน$(4).exists() falseในบริบทของการตรวจสอบสำหรับการดำรงอยู่ขององค์ประกอบใน DOM ๆ นี้น่าจะเป็นผลลัพธ์ที่ต้องการ


26

ไม่จำเป็นต้องใช้ jQuery (โซลูชันพื้นฐาน)

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

ตัวเลือกที่มีประสิทธิภาพมากขึ้นด้านล่าง (สังเกตเห็นการขาดจุดก่อนคลาส)

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector ใช้เครื่องมือการจับคู่ที่เหมาะสมเช่น $ () (เสียงดังฉ่าว) ใน jQuery และใช้พลังการประมวลผลมากขึ้น แต่ในกรณี 99% จะทำได้ดี ตัวเลือกที่สองนั้นชัดเจนยิ่งขึ้นและบอกรหัสว่าจะต้องทำอย่างไร มันเร็วกว่ามากตาม jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25


25

ฉันแค่ต้องการใช้จาวาสคริปต์ธรรมดาในการทำเช่นนี้

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

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

9
ฉันพบว่าวิธีดั้งเดิมของ OP ไม่เพียง แต่จะมีความเรียบง่าย แต่ยังสวยงามกว่านี้อีกมาก ดูเหมือนว่า overkill จะเขียนโค้ดนี้มากเมื่อเมธอดของ OP สั้นลงและไม่เกี่ยวข้องกับการเรียกกลับ
เลฟ

สำหรับกรณีง่ายๆ - คุณพูดถูก แต่สำหรับสถานการณ์ที่ซับซ้อนมากขึ้นซึ่งเกี่ยวข้องกับโค้ดจำนวนมากในทั้งสองกรณีฉันคิดว่าวิธีการของฉันดีกว่า
Eternal1 1

4
ในสถานการณ์ที่ซับซ้อนวิธีการนี้จะดีกว่าคำสั่ง if / else ง่าย ๆ ?
Jarvl

19

ฉันมีกรณีที่ฉันต้องการดูว่ามีวัตถุอยู่ภายในของวัตถุอื่นหรือไม่ดังนั้นฉันจึงเพิ่มบางสิ่งลงในคำตอบแรกเพื่อตรวจสอบตัวเลือกภายในตัวเลือก ..

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

18

เกี่ยวกับ:

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

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

มันน้อยมากและช่วยให้คุณไม่ต้องล้อมรอบตัวเลือกด้วย$()ทุกครั้ง


3
สิ่งนี้อ่านว่า "ถ้ามีสิ่ง" แทนที่จะเป็น "ถ้ามีสิ่งที่มีอยู่" ซึ่งif($("#thing").exists(){}อ่านว่า นอกจากนี้ยังไม่ใช่วิธี jQuery
1j01

15

ฉันใช้สิ่งนี้:

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


14

นี่คือ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
    }
);

14

$("selector") ส่งคืนวัตถุที่มีlengthคุณสมบัติ หากตัวเลือกพบองค์ประกอบใด ๆ พวกเขาจะรวมอยู่ในวัตถุ ดังนั้นหากคุณตรวจสอบความยาวคุณจะเห็นว่ามีองค์ประกอบใดบ้าง ใน JavaScript 0 == falseดังนั้นหากคุณไม่ได้รับ0รหัสของคุณจะทำงาน

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

5
"ให้อาร์เรย์" - ไม่ก็ไม่ได้ มันทำให้คุณมีวัตถุ jQuery (ซึ่งแบ่งปันคุณสมบัติบางอย่างกับอาร์เรย์) คำตอบของคุณก็เหมือนกับ Tim Bütheจากปี 2009 เช่นกัน
เควนติน

11

นี่คือตัวอย่างที่สมบูรณ์ของสถานการณ์ที่แตกต่างกันและวิธีการตรวจสอบว่าองค์ประกอบที่มีอยู่ใช้โดยตรงถ้าในตัวเลือก 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

คุณสามารถลอง $ ("# xysyxxs") ในดีบักเกอร์ของคุณคุณจะเห็นว่า jquery ไม่ส่งคืนค่าว่างหรือไม่ได้กำหนด ดังนั้นทางออกสุดท้ายจะไม่ทำงาน
Béranger

11

คุณไม่ได้มีการตรวจสอบว่าเป็นมากกว่า0เช่น$(selector).length > 0, $(selector).lengthก็พอและเป็นวิธีที่สง่างามในการตรวจสอบการดำรงอยู่ขององค์ประกอบ ฉันไม่คิดว่ามันคุ้มค่าที่จะเขียนฟังก์ชั่นสำหรับสิ่งนี้เท่านั้นหากคุณต้องการทำสิ่งต่าง ๆ เพิ่มเติมใช่

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.