jquery - 仅将输入附加到当前悬停的 li

Question

我试图在当前悬停在 ul 上显示一个输入字段。这种代码类型的作品：

$('ul').hover(function(){
  $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>');
},
function () {
      $(this).find("input:last").fadeOut('fast');
      $(this).find("button:last").fadeOut('fast');
    }

);

但它也为所有父母显示了一个输入字段：/

我试图用 find 从父母那里删除 div

      $(this).parents().find("input:last").fadeOut('fast');

但当然，该代码也可以找到当前悬停的 ul 中的那个...

Answer 1

您已附加到 ul，因此它将适用于所有 ul，因此请尝试指定要附加的 ul

更简单的方法是在 ul中添加idorclass

$('#one').hover(function(){
  $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>');
},
function () {
      $(this).find("input:last").fadeOut('fast');
      $(this).find("button:last").fadeOut('fast');
    }

);

Answer 2

这会发生，因为

孩子们是ul他们的一部分，ul所以input将附加到他们身上

你可以使用条件

喜欢hasClass或喜欢ul>li

Answer 3

感谢您的输入，我稍微改变了我的方法，现在它运行良好。

我在ever ul 的末尾添加了一个输入字段。用 css 隐藏它 使它只有当前悬停的有类活动（从父母和孩子中删除类），并且只显示 ul 的直接孩子的 div 类活动:)

$('ul').hover(function(){
      $(this).addClass('active');
      $(this).parents().removeClass('active');
      $(this).children().removeClass('active');
    }, function(){
      $(this).removeClass('active');
    });

HTML

<ul class="tasks tasks-20">
<div><input type="text"> <button>Add main task</button></div></ul>
</li>
<div><input type="text"> <button>Add goal</button></div></ul><ul class="goals"><h2>The public</h2>

<li><span>: :</span>Follow our journey
<ul class="tasks tasks-24">
<div><input type="text"> <button>Add main task</button></div></ul>
</li>
<div><input type="text"> <button>Add goal</button></div></ul> 

CSS

 ul.active>div{
            display: block;
    }