javascript - 使用存储在变量中的 jQuery 句柄

Question

我的脚本是这样的

(function( $ ){
   $.fn.customize_box = function() {
   //get the element id from the handle
   var my_id = this.attr('id');
   //add some layout elements before to this input box
   $('<p>hello</p>').before('#' + my_id);
      alert(my_id);
   }; 

   })( jQuery );

这是我编写的 jquery 函数，用于在触发元素前后添加一些 html 元素。

$('#tags').customize_box();

这是触发代码，我为 ID 为“tags”的输入字段触发它我的 HTML 就像这里

<div class="ui-widget">
  <input id="tags" size="50"  value="sankar is playing"/>
</div>

问题是，在函数中，我获取了触发的元素属性，包括 ID，并将 id 保存到一个变量中，但是我无法使用 .before() 编写一些 html，正如您在代码中看到的那样，警报是正确出现，但是HELLO没有添加到内容中，请问有哪位大神帮忙调试一下吗？

Answer 1

首先，您应该使用insertBefore，而不是before。其次，您可以使用 this 获取插件实例化的元素实例，因此您不需要将选择器连接在一起。试试这个:

(function ($) {
    $.fn.customize_box = function () {
        var my_id = this.attr('id');

        $('<p>hello</p>').insertBefore(this);
        alert(my_id);
    };
})(jQuery);

Example fiddle