查找与类名最接近的元素

Question

我有一个具有相同类名的唯一项列表。CCD_ 1。

<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的closest（）方法，但没有成功。

$(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的回答。

Answer 2

没有理由为此使用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>

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

Answer 3

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

你正在寻找子元素，而不是最接近的元素，所以你想使用".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();
  });

Answer 4

正确的实现：

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

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