Сократить простой текст Div

Question

Я использую сервис под названием "embedly", который показывает мои каналы. Я пытаюсь сократить текст этого канала, поэтому я попытался:

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

Я поместил это в готовый документ, а также в "window.load", но, похоже, ничего не работает. Вот пример: http://jsfiddle.net/2VBSX/1/

Answer 1

Это заняло у меня очень много времени, чтобы выяснить, но я думаю, что лучшее, что вы можете сделать, это дать элементам секунду для загрузки в DOM, а затем запустить вашу функцию: 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 2

HTML-код Jquery не принимает функцию в качестве аргумента, а только простой 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 3

Итак, мой другой ответ недействителен, потому что ОП не упомянул, что все элементы были созданы на лету, поэтому они не могут быть сопоставлены классическим способом.

Если изменения прикреплены к подходящему событию (например, нажмите), то было бы легко использовать делегатов с .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(" ") + "..."; 
}