使用类名查找最近的元素

I have a list of unique items with the same class name, .word.

我有一个具有相同类名的唯一项目列表.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>

I'm using jQuery to display the delete button on mouseover of an element. I'm looking for a way to only display the (closest) button of the hovered li element.

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

I've tried using jQuery's closest() method but unsuccessful.

我尝试过使用jQuery的nearest（）方法但不成功。

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

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

I have a JSBin uploaded, here.

我在这里上传了一个JSBin。

4 个解决方案

#1

There is no reason to be using jQuery (or javascript) for that. Use CSS:

没有理由使用jQuery（或javascript）。使用CSS：

.delete-word { display:none; }
.word:hover .delete-word {display: block;}

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

Since it looks like you are generating a list of terms and definitions, you should probably consider replacing your ol tag with dl, remove your li tags (or change to div), change the first p tag with dt and the second p tag with dd as this is exactly what these tags are for.

由于看起来您正在生成术语和定义列表，您应该考虑用dl替换ol标记，删除li标记（或更改为div），使用dt更改第一个p标记，使用dd更改第二个p标记因为这正是这些标签的用途。

#2

You are not looking for the closest, you are looking for a child. Use the children method.

你不是在找最近的，你正在寻找一个孩子。使用children方法。

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

Alternatively, if you wish to select from all descendants of .word, you can use the find method.

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

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

Note: For a CSS only solution, refer to Robert McKee's answer.

注意：对于仅CSS解决方案，请参阅Robert McKee的回答。

#3

Looks like you are on the right path of thinking, I have ran into this problem a couple times in the last month and asked the same question on here so glad I can finally help someone out with it.

看起来你正走在正确的思路上，我在上个月遇到过这个问题几次并在这里问了同样的问题，很高兴我终于可以帮助别人了。

You are looking for the child element no the closest element so you will want to utilize '.children()' but also will need $(this) so you are only grabbing the child of the .word you are hovering over and not all of the .word classes

你正在寻找没有最接近元素的子元素，所以你会想要使用'.children（）'，但也需要$（this）所以你只是抓住你正在盘旋的.word的孩子而不是所有的.word类

Jquery

$('.word').hover(function() {
    // show
    $(this).children(".delete-word").show();
  }, function(){
    // callback on mouse out - hide
    $(this).children('.delete-word').hide();
  });

#4

The correct implementation :

正确的实施：

$('.word').on("mouseover",function() {
  $(this).find(".delete-word").show();
  }).on("mouseout",function() {
       $(this).find(".delete-word").hide();
  });

http://jsfiddle.net/1fe1sanv/2/

http://jsfiddle.net/1fe1sanv/2/