Why "$(this)" doesn't work in the following example

Question

HTML:

<!-- try to change the value="" -->
<input class="test" type="text" value="">

jQuery

$(function () {

        if (!$(".test").val()) {
        alert("Empty");
            $(this).addClass("removeMe");
        } else {
        alert("not Empty");
            $(this).addClass("addMe");
        }

});

Why $(this) doesn't work here? And what is it possible to do about it if, say there's more than one element(.test) to include, for example 3: if (!$(".test, .test2, .test3").val()) {

`this` is function scoped, in your example the closest function is the DOM-ready function, there's no function setting `this` to whatever you think it should be. — adeneo, Apr 06 '17 at 13:50
This code just runs once. Did you want to run it at every change of the input? (Hint) — trincot, Apr 06 '17 at 13:50
what do you mean by "doesn't work" ? Seems to be alerting "empty" which is correct in this case. — LorDex, Apr 06 '17 at 13:50
because inside your closure this mean global window object which does not have any addClass method — Abhisek Malakar, Apr 06 '17 at 13:50
@adeneo Thank you for pointing to the right direction. Will learn new things :) — sorvz, Apr 06 '17 at 14:03

Rory McCrossan · Accepted Answer · 2017-04-06T14:00:24.137

4

The problem is because the code runs directly within the document.ready handler and is therefore within the scope of the document, hence this refers to the document.

To achieve what you require you would be best to cache a selector and use that again to add the required class, like this:

$(function () {
  var $test = $('.test');

  if (!$test.val()) {
    console.log("Empty");
    $test.addClass("removeMe");
  } else {
    console.log("not Empty");
    $test.addClass("addMe");
  }
});

What is it possible to do about it if, say there's more than one element to include, for example 3: if (!$(".test, .test2, .test3").val()) {

In that case you'd need to test each element individually:

if (!$('.test1').val() && !$('.test2').val() && ... ) {

edited Apr 06 '17 at 14:00

answered Apr 06 '17 at 13:50

Rory McCrossan

306,214
37
269
303

Yep, my bad. Corrected – Rory McCrossan Apr 06 '17 at 13:55
1

This code won't work as expected if there is more than one input with class `test` because `.val()` will only consider the very first element – devnull69 Apr 06 '17 at 13:57
@devnull69 that's true. Although the OP does state he's giving his element different class names: `for example 3: if (!$(".test, .test2, .test3")` – Rory McCrossan Apr 06 '17 at 13:58
@devnull69 Yes, that's what I'm trying to test right now with Rory's example and using `this`, but doesn't work – sorvz Apr 06 '17 at 13:59
@RoryMcCrossan Thanks, but can you show please how would it be possible to use multiple selectors inside the `$test` and use `this` accordingly? – sorvz Apr 06 '17 at 14:00
Just added that to the answer for you – Rory McCrossan Apr 06 '17 at 14:00
@RoryMcCrossan Yes, noticed. Thank you. So there's no chance of making it more dynamic with `this`? Perhaps some other approach or something, because this isn't effective... I will repeat my self multiple times – sorvz Apr 06 '17 at 14:02
1

If you're using unique classes, then no. A better way would be to put the same class on all the elements and loop through them with `each()`. – Rory McCrossan Apr 06 '17 at 14:04
@RoryMcCrossan Can you please tell me what am I doing wrong: https://jsfiddle.net/8rbuuv9d/2/ – sorvz Apr 06 '17 at 14:20
1

The logic in the each is incorrect and the colour in your CSS class is missing the #. Here you go: https://jsfiddle.net/8rbuuv9d/3/ – Rory McCrossan Apr 06 '17 at 14:23
@RoryMcCrossan I did it my self! :D https://jsfiddle.net/8rbuuv9d/4/ – sorvz Apr 06 '17 at 14:23
@RoryMcCrossan But thank you, very, very much! :) – sorvz Apr 06 '17 at 14:24
@RoryMcCrossan Thank you once again for correcting and pointing out on the mistakes :) – sorvz Apr 06 '17 at 14:24
1

No problem, glad to help. Here's a more simplified version using `toggleClass()`: https://jsfiddle.net/8rbuuv9d/5/ – Rory McCrossan Apr 06 '17 at 14:24
@RoryMcCrossan Amazing! – sorvz Apr 06 '17 at 14:25

Why "$(this)" doesn't work in the following example

1 Answers1

Linked