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

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

• javascript
• jquery

• Please show the corresponding HTML ... or (even better) create an example jsfiddle/jsbin for it – devnull69 Commented Oct 7, 2013 at 11:30
• 1 Try putting console.log(alreadyExistingResourceKeyNameTextBox.length); after find method. What are you getting? Zero or something else? – palaѕн Commented Oct 7, 2013 at 11:31
• 2 if (alreadyExistingResourceKeyNameTextBox.length > 0) {.... } – Abhitalks Commented Oct 7, 2013 at 11:31

4 Answers 4

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

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.

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

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