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（）确实确实接受一个函数作为参数，格式为{{1 ，可以直接访问html部分。（感谢@Raminson指出它）

在@Raminson观察之前，我的代码是：

$(...).html(function(index, oldhtml));

通过更正，第一部分变为（仍然使用$('.description').each( function(i,e){ $(e).html(reduce($(e).html()));} ); function reduce(s) { return s.substring(0, 100) .split(" ").slice(0, -1) .join(" ") + "..."; }函数）：

reduce()

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(" ") + "..."; 
}

缩短普通div文本

3 个答案: