为什么这个jQuery不将HTML <li>的值插入到<input>中？

问题描述

| 我有这个HTML：

<div>
<input type=\"text\" class=\"dropInput\">
<ul class=\"inputDrop\">
<li>Hello</li>
<li>Goodbye</li>
</ul>
<input type=\"text\" class=\"dropInput\">
<ul class=\"inputDrop\">
<li>Hola</li>
<li>Adios</li>
</ul>
</div>

而且我有这个jQuery：

$(\'.inputDrop li\').live(\'click\',function(){

currentOption  = $(this).html();

$(this).prev(\'.dropInput\').val(currentOption);

});

应该这样做，以便在单击

<li>

之一时将其值插入到列表前的

<input>

中，但它没有这样做。有什么原因不起作用？     

解决方法

        

$(this)

将引用

li

元素，而不是父级

ul

。 试试这个...

$(\'.inputDrop li\').live(\'click\',function(){

   var currentOption = $(this).html();

   $(this).closest(\'ul\').prev(\'.dropInput\').val(currentOption);

});

jsFiddle。 用variables8ѭ声明变量也是一个好主意，否则将成为全局对象的属性（在浏览器环境中为

window

）。     ,        替代方法：

$(\'.inputDrop li\').live(\'click\',function() {
    var li = $(this);
    var currentOption = li.html();
    li.parent().prev(\'.dropInput\').val(currentOption);
});