jQuery-$（this）不接受元素

Question

所以我正在做新项目。 我已经制作了php multilingual nav-bar，而在其他语言中，没有链接的名称。 如果没有文本，我想隐藏该链接，但是我的代码似乎不起作用。 你能帮我吗？ 谢谢！

这是一个链接 ！

的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

为了有另一种方式，这是我的两分钱。

它不起作用的原因是因为您的$(this) 没有引用您的$('a.link') 。 我强烈建议做一些很好的console.logs()试图了解this指的是。 掌握JavaScript中的闭包和作用域非常重要，因为如果人们不了解它，这往往会让人头疼。 我添加了一个带有控制台的工作片段，以帮助您理解。

 $(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> 

解释代码的每个部分：

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

在这一行中，JQuery使用类链接访问类型为a的任何HTML元素，并遍历每个元素。 在每个循环中，它应用匿名函数（因为它没有名称或指向它的指针），您将其作为参数传递给each 。 当您在该函数的作用域内时，JQuery会将该this绑定到该元素，在本例中为a.link 。 您可以通过查看代码的第一个console.log()并打印出绑定到window元素的this来进行检查。 您将看到一大堆属于该对象的信息。 但是，当您再次查看控制台并在文本之后查看console.log() ，我是谁？ 您将看到打印出的a元素。 这就是this内部的each()函数。 酷吧？

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

内部的匿名函数你this是指您的a.link HTML元素。 您需要执行$(this)使其成为JQuery元素并在其上使用JQuery函数。 完成后，您要做的就是询问它是否为空，然后将其隐藏。

我知道这似乎令人困惑，但这只是一开始。 一旦了解了JavaScript就是关于闭包和对象的全部知识，您就会意识到，成为狂野的西部真是太酷了。 :)

Answer 2

这是因为上下文this是指窗口元素。 您需要在此处使用.filter()函数来获取没有文本的元素：

 $('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>