How to apply javascript function for different divs with sames classname?

Question

I have written the javascript, which shows only 3 chars of the text, if the text-content has more than 3 chars.

//var msg = $('.message-content').children('p');
var msg = $('.message-content').text();

if(msg.length >3){
    $(".message-content").html(msg.substring(0,3));
    $( ".more-hidden" ).html( msg.substring(3)).hide();
    $(".readmore").css("visibility", 'visible');
    $(".message-content").css("float", 'left');
}

 $('.readmore').click(function(e){
    e.preventDefault();
    $('.more-hidden').slideToggle();
    $(this).text( $(this).text() == '... Read More' ? "Show Less" : "... Read More");
});

When clicked on the "show more" link, the whole text is displayed. See fiddle . This works fine.

Now the problem is that the user adds <div class="message-content">some commit </div> dynamically. My question is: How to apply the same function for all <div class="message-content">some commit </div> ?

Answer 1

You need to run that batch of codes again to apply it to new elements. One simple thing you could do is to write it as a function and call that function when you insert a new div. Something like:

function Shortify() {
  $('.message-content').text(function(i, text) {
    if (text.length > 3) {
      $(this).html(text.substring(0, 3));

      $(this).siblings(".more-hidden").html(text.substring(3)).hide();
      $(this).siblings(".readmore").css("visibility", 'visible');
      $(this).css("float", 'left');
    }
  });
}

Another solution would be to listen for when an element with message-content class added into the DOM and manipulate it to match your need. You can use Mutation Observers for this. But be warned this more complex and you will need to tweak things if you want consistent behaviour through different browsers.

Answer 2

You can use function .on function for your link. So you can append only one handler for all your divs, but you still have to call your trim every time when user added/updated comment.

Example of using jQuery .on function:

// container - it is your comments parent block
var $container = $('.container');
$container.on('click', '.readmore', function(e) {
    // your handler
});

You can see work example here: http://jsfiddle.net/uk1qbd7s/1/

Answer 3

This is what you want?

 $('.message-content').each(function () { var toggle = $('<a href="#">... Read More</a>') .addClass('readmore') .insertAfter($(this)); var more = $('<div></div>') .addClass('more-hidden') .insertAfter($(this)); var msg = $(this).text(); if (msg.length > 3) { $(this).html(msg.substring(0, 3)); more.html(msg.substring(3)).hide(); toggle.css("visibility", 'visible'); $(this).css("float", 'left'); } toggle.click(function (e) { e.preventDefault(); more.slideToggle(); $(this).text($(this).text() == '... Read More' ? "Show Less" : "... Read More"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div class="message-content">1)nice product</div><br/> <div class="message-content">2)nice product</div><br/> <div class="message-content">3)nice product</div><br/> <div class="message-content">4)nice product</div><br/> 

With this code you can add any number of .message-content elements and that codes automatically add .more-hidden and .readmore elements