jQuery插件奇怪此行為

Question

我正在開發我的第一個插件。 它將標准select元素轉換為風格化div 。 如果我調用一個可收集所有$(".special_selctor") selects並執行邏輯的jQuery函數，該代碼就可以正常工作，因此我決定將該邏輯放入插件中，以便直接在select上調用stylize而不是遍歷我所有的特殊課程。

這是NON-plugin中的代碼片段（ $(this)是標有我的自定義類的select的實例）：

var tmp = '';
tmp += '<div class="jm-select"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' : '') + '>';
tmp += '<a ' + (f_width ? ' style="width:' + f_width + 'px;"' : '') + ' href="javascript:void(0)"><span class="display">' + display + '</span><span class="arrow"></span></a>';
tmp += '<div class="options"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7) + 'px;"' : '') + '>';
$(this).children('option').each(function () {
  tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>';
});
tmp += '</div>';
tmp += '</div>';

$(this).after(tmp);
$(this).hide();

我們創建特殊的div然后隱藏select

我的插件代碼（注意：它在CoffeeScript中）：

if this.attr('data-width')
f_width = this.attr('data-width')
tmp = ''
tmp += '<div class="jm-select"' + (if f_width then ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' else '') + '>'
tmp += ' <a ' + (if f_width then ' style = "width:' + parseInt(f_width) + 'px;" ' else ' ') + ' href = "javascript:void(0)" > <span class="display" > ' + display + ' </span><span class="arrow"></span > </a>'
tmp += '<div class="options"' + (if f_width then ' style="width:' + (parseInt(f_width) + 7) + 'px;"' else '') + '>'
this.children('option').each () ->
  tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>'
tmp += '</div>'
tmp += '</div>'


this.after(tmp)
this.hide()

所述this.hide()隱藏兩者select和新創建div （ this是現在陣列）。 如果我在this.after(tmp)之前調用this.hide() this.after(tmp) ，它可以正常工作。

為什么this.hide()遍歷新this “陣”，而不是僅僅在this select對象？

從CoffeeScript轉換的完整插件代碼

var $;

$ = jQuery;

$.fn.jmselect = function() {
  var display, f_width, name, tmp, value;
  name = this.attr('name');
  value = this.val();
  display = this.children("option:selected").text();
  if (this.attr('data-width')) {
    f_width = this.attr('data-width');
  }
  tmp = '';
  tmp += '<div class="jm-select"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7 + 32) + 'px;"' : '') + '>';
  tmp += ' <a ' + (f_width ? ' style = "width:' + parseInt(f_width) + 'px;" ' : ' ') + ' href = "javascript:void(0)" > <span class="display" > ' + display + ' </span><span class="arrow"></span > </a>';
  tmp += '<div class="options"' + (f_width ? ' style="width:' + (parseInt(f_width) + 7) + 'px;"' : '') + '>';
  this.children('option').each(function() {
    return tmp += '<div class="option"><span class="display">' + $(this).html() + '</span><span class="value">' + $(this).attr('value') + '</span></div>';
  });
  tmp += '</div>';
  tmp += '</div>';
  this.hide();
  this.after(tmp);
  this.children("a").click(function(event) {
    event.stopPropagation();
    $('.jm-select').addClass('inactiveSelect');
    $(this).parent('.jm-select').removeClass('inactiveSelect');
    $('.inactiveSelect').children('.options').hide();
    return $(this).parent('.jm-select').children('.options').toggle();
  });
  this.find(".options .option").click(function() {
    var tmp2;
    tmp = $(this).children('span.value').html();
    tmp2 = $(this).children('span.display').html();
    $(this).parent('.options').parent('.jm-select').prev('select').val(tmp).trigger('change');
    $(this).parent('.options').parent('.jm-select').children('a').children('.display').html(tmp2);
    return $('.jm-select').children('.options').hide();
  });
  return this;
};

Answer 1

我認為您需要將插件的行為包裝在.each循環中：

$.fn.jmselect = function() {
  return this.each(function() {
    // all your stuff here, except the final return
  });
};