使用类名查找最近的元素

Question

我有一个具有相同类名的唯一项目列表.word.

<ol>
  <!-- a -->
  <li class="word">
    <p>Aloof</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- b -->
  <li class="word">
    <p>Fallacy</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>

  <!-- c -->
  <li class="word">
    <p>Disdain</p>
    <p>Definition here...</p> 
    <button class="delete-word">Delete</button>     
  </li>
</ol>

我正在使用jQuery在鼠标悬停元素时显示删除按钮.我正在寻找一种只显示悬停li元素的(最近)按钮的方法.

我尝试过使用jQuery的nearest()方法但不成功.

$(document).on("mouseover", ".word", function() {
  // show
  $(".delete-word").show();

  // hide
  $(".word").mouseout(function () {
      $(".delete-word").hide();
  });
});

我在这里上传了一个JSBin .

Answer 1

你不是在寻找closest,你正在寻找一个孩子.使用该children方法.

$(this).children(".delete-word").show();

或者,如果您希望从所有后代中进行选择.word,则可以使用该find方法.

$(this).find(".delete-word").show();

注意:对于仅CSS解决方案,请参阅Robert McKee的回答.