jQuery - $(this) doesn't take the element

Question

So I'm making new project. I have made php multilingual nav-bar and in other language there is no name for one that link. I want to hide that link if there is no text but my code doesn't seem to work. Can you help me guys? Thanks!

Here's a link !

HTML

<div class="navigation">
  <div class="nav_item">
    <a href="#" class="link"><!-- Home --></a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">About</a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">Portfolio</a>
  </div>
</div>

jQuery

$(function () {
    if ($("a.link").is(':empty')) {
    $(this).parent().addClass("hidden");
  }
});

Answer 1

For the sake of having another way of doing this, here's my two cents.

The reason why it is not working is because your $(this) does not refer to your $('a.link') . I strongly recommend doing some nice console.logs() to try to understand what this is referring to. It's very important to get a good handle on closure and scopes in JavaScript, since it's what tends to give people headaches if they don't understand it. I've added a working snippet with consoles to help out in understanding.

 $(document).ready(function(){ console.log("Who am I?"); console.log(this); $("a.link").each(function(){ console.log("Now who am I?"); console.log(this); // Now this really does refer to your nav links, you should see it printed out in the console if( $(this).is(":empty") ){ console.log(" I am going to be hidden. "); console.log(this); $(this).text("Super hidden"); //You would actually do $(this).parent('.nav-item').hidden() but I did it like this so you can verify visually that it targets the right element } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <div class="nav_item"> <a href="#" class="link"><!-- Home --></a> </div> <div class="nav_item"> <a href="#" class="link">About</a> </div> <div class="nav_item"> <a href="#" class="link">Portfolio</a> </div> </div> 

Explaining each part of the code:

$("a.link").each(function(){..});

In this line JQuery is accessing any HTML elements of type a with class link and looping over each one. In each loop, it applies the anonymous function (because it has no name or pointer to it) you pass as a parameter to each . When you are inside the scope of that function, JQuery has kindly binded the this to the element, in this case the a.link . You can check this out by looking at the first console.log() of the code, printing out a this that's bound to the window element. You will see a whole bunch of information that belongs to that object. But when you look again at the console and view the console.log() after the text Now who am I? you will see the a elements printed out. That's the this inside that each() function. Cool, right?

if( $(this).is(":empty") ){
   console.log(" I am going to be hidden. ");
   console.log(this);
   $(this).text("Super hidden"); 
}

Inside that anonymous function your this refers to your a.link HTML elements. You need to do a $(this) in order to make it a JQuery element and use JQuery functions on it. Once that's done, all you do is ask if it's empty, and if it is then just hide it.

I know it seems confusing, but it's only at the start. Once you understand that JavaScript is all about closures and objects you'll realise how cool it is for it to be the wild wild west. :)

Answer 2

That is because context of this refers to window element. You need to use .filter() function here to get element without no text:

 $('a.link').filter(function(){
   return !$(this).text().trim();
 }).closest('.nav_item').hide()

 $(document).ready(function() { $('a.link').filter(function(){ return !$(this).text().trim(); }).closest('.nav_item').hide() }); 

 body { padding: 5px; } label { font-weight: bold; } input[type=text] { width: 20em } p { margin: 1em 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <div class="nav_item">s <a href="#" class="link"><!-- Home --></a> </div> <div class="nav_item"> <a href="#" class="link">About</a> </div> <div class="nav_item"> <a href="#" class="link">Portfolio</a> </div> </div>