仅将输入附加到当前的hoverd 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，所以尝试specyfy你要追加的ul

更简单的方法是向ul

添加id或class

$('#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

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

我在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;
    }