CODEWITHSUNDEEP
javascriptjquery
Water Cooler v2
Water Cooler v2

Reputation: 33880

jQuery.find() returns an object even when there's no matching child element in the DOM

I am trying to find an element with the ID '' that is within the element '', and therefore is its child.

I am using the $.find method to perform the search.

If the child object is found, I'd like to perform some actions, and if the child object isn't found, I'd like to do different things.

However, even though I know that there is no such child element existing, the jQuery.find method reports an object that I am not sure, from inspecting in the Watches window, what it is.

Here's the relevant code snippet:

function CreateResourceKeyTextBox(resourceKeyId, editMode) {
    var resourceKeyTableCell = $("#tdKeyResourceKeyId" + resourceKeyId);

    var resourceKeyNameTextBox = null;

    var alreadyExistingResourceKeyNameTextBox = resourceKeyTableCell.find('#txtResourceKeyName' + resourceKeyId);

    if (alreadyExistingResourceKeyNameTextBox != null && typeof alreadyExistingResourceKeyNameTextBox != "undefined") {
        resourceKeyTableCell.html('');
        resourceKeyNameTextBox = alreadyExistingResourceKeyNameTextBox;
        resourceKeyNameTextBox.css('display', 'block');
        resourceKeyNameTextBox.appendTo('#tdKeyResourceKeyId' + resourceKeyId);
        resourceKeyNameTextBox.css('width', '96%');
    }

Upvotes: 5

Views: 6143

Answers (4)

Kemal Dağ
Kemal Dağ

Reputation: 2763

jquery's find method returns a jquery object whose internal matched elements are the corresponding elements to your css selector.

If css selector fails to match any elements, then, jquery's find method's return object's internal matched elements is an empty array. You can get internal matched elements with .get method as follows:

var elems = $.find(css_selector).get()

this method returns array of DOM elements not jquery object instances, and you can check empty array using following syntax

var elems = $.find(css_selector).get()
if(elems.length === 0){
    //array is empty
}else{
    //array is not empty

}

This behaviour of jquery minimizes any syntax errors you might get otherwise, jquery will work without errors, no matter your css selector matches any DOM elements or not. This is beneficial in most cases, where you simply apply some changes on matched elements regardless of there are any. If existence of such elements is critical to your business logic, you should check it manually.

Upvotes: 3

Ravi Dhiman
Ravi Dhiman

Reputation: 43

if an object is not found using jquery .find() method, it always return an empty array. if you are getting anything other than that, you need to check your DOM. You can always check the length of the result i.e. result.length > 0 || result.length === 1, depending on your need

Upvotes: 1

Cyril
Cyril

Reputation: 401

You should use alreadyExistingResourceKeyNameTextBox.length != 0 instead I think

Upvotes: 2

Denys Séguret
Denys Séguret

Reputation: 382274

jQuery query functions always return an object, even if there's no matching DOM elements.

Check the length, it will be 0 if there's no element in the set :

if (alreadyExistingResourceKeyNameTextBox.length ...

Upvotes: 9

Related Questions