Question

我正在开发一个jquery插件。我有多个插件实例。在插件中，我用更多的dom替换实例化的元素。我使用this.parent().find(...)来定位这些元素。

但这也会影响其他实例下的元素。如何仅选择该特定实例的元素？

代码示例

$('#one').pluginXX();
$('#two').pluginXX();

$.fn.pluginXX = function(options){

   var wrapper = this.parent();
   this.hide(); //hide the instantiated element

   wrapper.append(/**many elements***/);

   //i use $ document because button is generated dynamically
   $(document).on('click', 'button', function(){
       wrapper.find('ul').append("<li>item</li>");
   });

Answer 1

您应该使用$(this).parent()代替this.parent()和$(this).hide()代替this.hide()，因为this不是jQuery对象。尝试以下。希望这会对你有所帮助。

$('#one').pluginXX();
$('#two').pluginXX();

$.fn.pluginXX = function(options){

    var wrapper = $(this).parent();
    $(this).hide(); //hide the instantiated element

    wrapper.append(/**many elements***/);

    $(document).on('click', 'button', function(){
       wrapper.find('>ul').append("<li>item</li>");
    });
}

Answer 2

this是元素，$(this)是使用该元素构建的jQuery对象，因此您需要在任何地方使用$(this)而不是this } .hide和.parent()是jQuery方法，仅适用于jQuery个对象。

$('#one').pluginXX();
$('#two').pluginXX();

$.fn.pluginXX = function(options){

   var wrapper = $(this).parent();
   $(this).hide(); //hide the instantiated element

   wrapper.append(/**many elements***/);

   //i use $ document because button is generated dynamically
   $(document).on('click', 'button', function(){
       wrapper.find('ul').append("<li>item</li>");
   });

}

要查找$(this)中的任何元素，只需使用其他方法，例如.find()。 $(this).find("button")，将选择当前元素中的所有按钮元素。

设置一个事件处理程序，比如点击它的子元素，说按钮可以使用

完成

$(this).on('click', 'button', function(){
    wrapper.find('ul').append("<li>item</li>");
});

jquery插件 - 如何选择其子元素而不是其他实例？

2 个答案: