的Jquery

Question

我有一个具有相同类名的唯一项目列表，{。{1}}。

word

我使用jQuery在鼠标悬停元素时显示删除按钮。我正在寻找一种只显示悬停的<ol>  <li class="word"> <p>Aloof</p> <p>Definition here...</p> <button class="delete-word">Delete</button> </li>  <li class="word"> <p>Fallacy</p> <p>Definition here...</p> <button class="delete-word">Delete</button> </li>  <li class="word"> <p>Disdain</p> <p>Definition here...</p> <button class="delete-word">Delete</button> </li> </ol>元素的（最近）按钮的方法。

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

li

我上传了一个JSBin，here。

Answer 1

您正在寻找closest，您正在寻找一个孩子。使用children方法。

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

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

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

注意：有关仅限CSS的解决方案，请参阅Robert McKee's answer。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

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

您正在寻找没有最接近元素的子元素，因此您需要使用＆＃39; .children（）＆＃39;但也需要$（this）所以你只是抓住你所徘徊的.word的孩子，而不是所有.word类

的Jquery

getCount()

Answer 4

正确的实施：

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

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

使用类名查找最近的元素

4 个答案:

的Jquery