Buenas si bien vi varias preguntas de este tipo ninguna resuelve mi inconveniente, tengo en una pagina varios p con la misma clase ".more" en la cual c/u contiene un texto diferente, tengo que logar que si el texto contenido es muy largo lo acorte y agregue un botón leer +, el tema es que lo logre, pero siempre me imprime el mismo texto del primer p en todos los p ".more".
<p class=".more">Primer texto</p>
<p class=".more">Segundo texto con mas caranteres</p>
<p class=".more">Tercer texto</p>
en el jquery
$(function(){
var showChar = 5;
var content = document.querySelectorAll('.more');
var ellipsestext = "...";
var moretext = "Seguir leyendo ...";
var lesstext = "Mostrar menos";
for (var i = 0; i < content.length; i++) {
if(content[i].innerHTML.length > showChar) {
var c = content[i].innerHTML.substr(0, showChar);
html = '<div class="abstract">' + c + ellipsestext + '</div>' + '<div class="morecontent">' + content[i].innerHTML + '</div>' + '<p><span class="morelink">' + moretext + '</span></p>';
$('.more').html(html);
}
}
});
bueno traté de resumirlo al código para ver el problema nada mas, para mi que el problema esta en $('.more').html(html); por que siempre asigna lo mismo a todos los p
me hace esto, agregando la clase abstact si se cumple la condición de ser menor a 5 caracteres... que lo omití para no poner tanto código.
<p class=".more">Primer texto</p>
<p class=".more">Primer texto</p>
<p class=".more">Primer texto</p>