Jquery 插件在不同实例上表现不同

Question

我正在尝试为 jquery 编写一个简单的自动完成插件(用于学习目的”)。如果你在 JS 运行后查看 DOM，就会发现输入字段后面有 div，但只有第二个字段中有 ul。为什么？它应该在两个输入上同样工作，不是吗？

http://jsbin.com/avomez/1/edit这是我的代码:

HTML

 <input class="city" type="text" />
 <input class="city" type="text" /> 

JS

$.fn.autocomplete = function(){
    var self = $(this);
    var drpd = $('<div class="dropdown" />');
    var ul = $('<ul class="city" />');

    self.after(drpd);
    drpd.append(ul);



};

$("input.city").autocomplete();

Answer 1

您需要迭代并返回 this (jQuery 对象)来制作插件。见下文，

演示: http://jsbin.com/avomez/3/

原因:

1. $('input.city') 返回一个元素数组，您应该迭代单个元素以确保不会弄乱它。您原来的问题就是一个很好的例子。
2. 返回 jQuery 对象允许您像 $('input.city').autocomplete().addClass('someclass'); 一样链接

代码:

$.fn.autocomplete = function(){
  return this.each(function () {
    var self = $(this);
    var drpd = $('<div class="dropdown" />');
    var ul = $('<ul class="city" />');

    self.after(drpd);
    drpd.append(ul);
  });    
};