縮短普通div文本

Question

我正在使用名為'embedly'的服務來顯示我的Feed。 我正在嘗試縮短此Feed的內容，所以我嘗試了：

$('.description').html(
     function(){
         return $.trim($(this).html())
                .substring(0, 100)
                .split(" ").slice(0, -1)
                .join(" ") + "...";}
);

我把它放在准備好的文件中，也放在'window.load'中，但似乎沒什么用。 這是一個例子： http ： //jsfiddle.net

Answer 1

Jquery的HTML不接受函數作為參數，而只接受純HTML（字符串）。 要做你想做的事，請使用.each() :)

更正：如下面的評論者指出的那樣，我的代碼是正確的，但html的（） 的確接受一個函數作為參數，形式為$(...).html(function(index, oldhtml)); ，使得可以直接訪問html部分。 （感謝@Raminson指出來）

在@Raminson觀察之前，我的代碼是：

$('.description').each(
     function(i,e){
         $(e).html(reduce($(e).html()));}
);

function reduce(s)
{
         return s.substring(0, 100)
                .split(" ").slice(0, -1)
                .join(" ") + "...";
}

通過更正，第一部分變為（仍然使用reduce()函數）：

$(".description").html(function(i,s) { return reduce(s); });

Answer 2

這個花了很長時間才弄明白，但我認為你能做的最好的事情就是給元素加載一秒鍾，然后運行你的函數： http ： //jsfiddle.net/2VBSX/5/

$('div.newscontainer').embedly({
    key:':e0a98aba95ef11e09dcd4040d3dc5c07'
}).hide();

setTimeout(function() {
    $('div.newscontainer').show().find('.description').html(
        function(){
            return $.trim($(this).html())
            .substring(0, 100)
            .split(" ").slice(0, -1)
            .join(" ") + "...";
        }
    );
}, 1000);

Answer 3

所以，我的另一個答案是無效的，因為OP沒有提到所有元素都是動態創建的，因此它們無法以經典方式匹配。

如果修改附加到合適的事件（例如，單擊），那么使用.on()委托將很容易，因為它們對於插入DOM中的新元素也是有效的。 但唉，事實並非如此，我們必須對元素的創造進行操作。

一個解決方案是@ChrisClower的一個（定時輪詢頁面定期查找新元素）。

另一種解決方案是使用LiveQuery插件： http ：//docs.jquery.com/Plugins/livequery

然后一切都會很簡單：

$(".description").livequery(function() {  $(e).html(reduce($(e).html())); });

 function reduce(s)
{
     return s.substring(0, 100)
            .split(" ").slice(0, -1)
            .join(" ") + "..."; 
}