在我的jquery插件中需要幫助

Question

上週，我們爲某個選擇器中的文本省略了一個函數。

我打電話這樣的功能：通過選擇和我想的文本的最大長度

ellipsiText（50」班）。這工作正常，但即時嘗試使它成爲一個插件，調用像這樣：$（'。class'）。ellipsiText（50）。

所以，我正在閱讀jQuery網站的教程，我明白如何去做。但我認爲我對「這個」seletor有問題。這是我原來的功能：

function ellipsiText(selector,maxLength){ 


    var array = $(selector).map(function(){ 
     return $(this).text(); 
    }).get(); 

    var i; 

    var teste = []; 

    for (i=0;i<array.length;i++){ 

     if (array[i].length > maxLength){ 

     teste.push(array[i].substr(0,maxLength) + "..."); 

     } else { 

      teste.push(array[i]); 
     } 
    } 

    for (var i=0;i<teste.length;i++){ 

    $(selector).each(function(i){ 

     $(this).text(teste[i]); 

    }); 

    } 


} 

這裏是我做一個jQuery插件的暫定：

(function ($) { 

    $.fn.ellipsiText = function(length){ 

     var array = $(this).map(function(){ 
      return $(this).text(); 
      }).get(); 

     var i; 
     var teste = []; 

     for (i = 0; i < array.length; i++){ 
      if (array[i] > length){ 
       teste.push(array[i].substr(0,length) + "..."); 
      } else { 
       teste.push(array[i]); 
      } 
     } 

     $(this).each(function(i){ 

      $(this).text(teste[i]); 

     }); 
    }; 

}(jQuery)); 

我到底做錯了什麼？

Answer 1

這是未經測試，但基本結構是這樣的。當你需要一個循環時，你的代碼也有很多循環。

$.fn.ellipsiText= function(options) { 

    var settings = $.extend({ //nice way to give to give defaults 
     length : 50, 
     ellipsi : "..." 
     }, options); 

    return this.each(function() { //the return is needed for chaining 
     var elem = $(this); 
     var txt = elem.text(); 
     if (txt.length>settings.length) { 
      elem.text(txt.substr(0,settings.length) + settings.ellipsi); 
     } 
    }); 

}; 

，並調用它

$("div.defaults").ellipsiText(); 

$("div.foo").ellipsiText({ 
    length : 10 
}); 

$("div.more").ellipsiText({ 
    length : 10, 
    ellipsi : "<more>"  
}); 

Answer 2

你已經有了一個工作功能，就使用它。

$.ellipsiText = ellipsiText; 
$.fn.ellipsiText = function (count) { 
    ellipsiText(this, count); 
} 

現在你可以使用它像任何如下：

ellipsiText('.class',50); 
$.ellipsiText('.class',50); 
$('.class').ellipsiText(50); 

有重寫你已經有工作時，你可以使用它的功能沒有任何意義。

Answer 3

那麼首先不是問題，而是在第一個函數作用域中，而不是$(this)，您可以使用this.map/this.each。

的問題是，在第二個代碼，你做

if (array[i] > length) 

，而不是

if (array[i].length > length) 

沒事做的jQuery插件！

http://jsfiddle.net/UY88r/