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>