Question

I have some set of div which has a class name. Here I want to control/limit the number of characters to be displayed in the div based on the class name using JavaScript. How can I fix this?

Answer 1

Here is the jQuery solution for limiting the elements with .myclassto 200 chars:

var myDiv = $('.myclass');
myDiv.text(myDiv.text().substring(0,200));

The pure JavaScript solution (for all browsers that don’t support getElementByClassname) would look like this:

var i;
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++) {
  if(divs[i].className == 'myclass') {
    divs[i].innerHTML = divs[i].innerHTML.substring(0,200);
  }
}

Note that the pure JavaScript method may create invalid HTML if the divs contain markup. The correct way would be to iterate over the child nodes in the div.