6

Let's say we have:

var $letsTestA = $( '.lets-test-a' ),
    $letsTestB = $( '.lets-test-b' );

While the HTML is:

<div class="lets-test-a"></div>

(I know, I left out .lets-test-b)

Now, what happens if we try to call the variable $letsTestB?

I did do some testing, I'm not just blindly asking a question without doing some research first, but I'm a little confused with how this seems to work...

If I alert($letsTestA); or alert($letsTestB); I get the same outcome which is just [object Object] when testing from JSFiddle?

Here's my test fiddle: https://jsfiddle.net/m6j03423/

Furthermore to this, what I'm actually trying to do here is create a way to find out whether the content of a variable exists or not.

In PHP I would just write if (empty($myVar)) { // do action } but JS doesn't work the same way.

In JS I think I can write if ($letsTestA) { } and it should be able to print the result of the variable? But, I'm still getting [object Object].

What am I missing?

Can I even print the contents of a jQuery object?

How can I test whether the variable contains the true value of a jQuery object?

EDIT: Admittedly, I did see a few different answers saying to check the length, but I didn't understand that enough to connect that to what I'm doing.

Improve this question
9
  • 3
    You're not printing it, you're alerting it. Log it to the console and go from there. Commented Feb 14, 2017 at 13:40
  • just log it and check the console Commented Feb 14, 2017 at 13:43
  • 1
    A jQuery selector always returns a jQuery object - hence why there's no error and also why jQuery tolerates calling methods on non-existant elements. Sometimes that jQuery object contains one or more elements, other times it will be empty if none were found. To check this use the length property. If you haven't already I'd strongly suggest you read some of the jQuery user guides at learn.jquery.com Commented Feb 14, 2017 at 13:43
  • 1
    Both calls to the jQuery function are returning an object. The alert() is confirming that. What's in that object, you're not examining. Debug the code. If you want to know what's in those variables, pause execution at that point and examine the runtime values of those variables. Commented Feb 14, 2017 at 13:43
  • I'm coming from PHP, I thought PHP was supposed to be the messy one, JS just seems to be doing some things very differently. I appreciate your comments. I didn't even think logging it would make a difference, but yeah when I log it and open it up length is one of the properties. Commented Feb 14, 2017 at 13:44

1 Answer 1

Reset to default
1

You can use the .length property of the object to ascertain whether elements exists or not

 if ($letsTestA.length > 0) {
     //element exists
 }


var $letsTestA = $('.lets-test-a'),
    $letsTestB = $('.lets-test-b');

console.log($letsTestA.length);
console.log($letsTestB.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lets-test-a"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I have to wait a few minutes to accept your answer. Thanks! I'm coming from PHP, I would never think to check the length to see if there's anything in it.
Now that I know .length is used for this, I was doing some looking around, apparently the > 0 isn't necessary, but I guess it's faster than writing === true?
@mattroberts33 You'll want to look up "JavaScript truthiness".

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.