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());