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

Question

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%');
    }

Answer 1

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