Jquery：函數不允許追加

Question

我試圖將jquery function tweetable插入到我的HTML中的特定位置。該文件說，這樣的事情：

$('#twitter').tweetable({username: 'username'}); 

的問題是，tweetable HTML之前的#twitter ID內別的放置。在我來說，我想它的盡頭，所以我想這：

$('#twitter').append(tweetable({username: 'username'})); 

但螢火蟲說tweetable is not defined。我應該怎麼稱呼tweetable，以便它可以附加到#twitter ID？

編輯： tweetable源的一部分這可能是解決這個有趣的：

(function ($) { 
    $.fn.tweetable = function (options) { 
     var defaults = { 
      limit: 5, 
      username: 'twitter', 
      time: true, 
      replies: false 
     }; 
     var options = $.extend(defaults, options); 
     return this.each(function (options) { 
      ... 
     }); 
    } 
})(jQuery); 

Answer 1

在插件，請嘗試更換這行：

$(act).prepend('<ul class="tweetList">'); 

...這一點：

$(act).append('<ul class="tweetList">'); 

順便說一句，插件中有一些東西讓我想到它的質量。

以上面的代碼爲例。這裏act已經是jQuery對象了，所以不需要再包裝它。你應該可以做act.append('<ul...。

然後，它繼續重新選擇使用$('.tweetList')剛創建的上述元素，而不是緩存對其的引用。這是在回調getJSON請求的循環內完成的。非常低效。

---

編輯：這裏有一個版本，它允許所謂的position多了一種選擇，這將接受"append"或"prepend"進行設置。

它也緩存列表。可以做其他改進，但無論如何，這會好一點。

$('#twitter').tweetable({username: 'username', position: 'append'}); 

插件：

(function ($) { 
    $.fn.tweetable = function (options) { 
     var defaults = { 
      limit: 5, 
      username: 'philipbeel', 
      time: false, 
      replies: false, 
      position: 'append' 
     }; 
     var options = $.extend(defaults, options); 
     return this.each(function (options) { 
      var act = $(this); 
      var $tweetList; 
      var api = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name="; 
      var count = "&count="; 
      $.getJSON(api + defaults.username + count + defaults.limit + "&callback=?", act, function (data) { 
       $.each(data, function (i, item) { 
        if (i == 0) { 
         $tweetList = $('<ul class="tweetList">')[defaults.position.toLowerCase() + 'To'](act); 
        } 
        if (defaults.replies === false) { 
         if (item.in_reply_to_status_id === null) { 
          $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2')); 
          if (defaults.time == true) { 
           $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>'); 
          } 
         } 
        } else { 
         $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2')); 
         if (defaults.time == true) { 
          $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>'); 
         } 
        } 
       }); 
      }); 
     }); 
    } 
})(jQuery); 

Answer 2

如何創建一個新的元素，在那打電話tweetable，並將其附加到當前的元素？

var temp = $('<div></div>'); 
temp.tweetable({username:'username'}); 
$('#twitter').append(temp.html()); 

我還沒有測試過，讓我知道如果它不起作用。我猜測它可以合併成一條線：

$('#twitter').append($('<div></div>').tweetable({username:'username'}).html());