Как получать размер текста с elementbytagname - JAVASCRIPT?

У меня есть список с этикетками p внутри. Я хочу достичь размера каждого текста и потом обрезать это. У меня есть это:

<script>
    var text;
    for(var i=0;i<document.getElementsByTagName("p").length;i++){
      console.log(document.getElementsByTagName("p")[i].length+ "");
      if(text[i].length > 12) {
          text[i] = text[i].substring(0,10)+"...";
      }
    }
</script>

Проблема состоит в том, что он дает мне undefined. Также у него было другое сомнение. Где он был бы должен размещать этот кусок кода, внутри head или в конце body? Было бы лучше делать это с jQuery?

6
задан 19.01.2017, 12:13
0 ответов

Основываясь на твоем примере:

var text;
console.log(document.getElementsByTagName("p").length + ' Elmentos P ');

for (var i = 0; i < document.getElementsByTagName("p").length ; i++) {
  console.log(i+1);
  console.log(document.getElementsByTagName("p")[i]);
  console.log(document.getElementsByTagName("p")[i].textContent.length);
  document.getElementsByTagName("p")[i].textContent = document.getElementsByTagName("p")[i].textContent.substring(0,12) + "...";
}
<p>1 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>2 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>3 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
4 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
5  Parrafo ejemplo Parrafo ejemplo Parrafo
</p>
<p>
6 Parrafo ejemplo Parrafo ejemplo
</p>
<p>7 0123456789</p>

На jQuery ясно, что он был бы более легким, если бы ты это использовал.

Пример с jquery:

$(document).ready(function(){
  //Llamo la fución each de jquery y le mando como parametro todos los objetos P $("p")
  $.each($("p"),function(indice, valor){
    //console.log(indice);    
    //console.log(valor);
    //This es el objeto actual, el P del ciclo que corresponda
    //la propiedad .text modifica el texto del P, obtiene y modifica
    $(this).text($(this).text().substring(0,12) + "...");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>1 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>2 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>3 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
4 Parrafo ejemplo Parrafo ejemplo Parrafo ejemplo
</p>
<p>
5  Parrafo ejemplo Parrafo ejemplo Parrafo
</p>
<p>
6 Parrafo ejemplo Parrafo ejemplo
</p>
<p>7 0123456789</p>
2
ответ дан 03.12.2019, 17:37
  • 1
    Если ты одобряешь, желательно давать положительную точку tambié n @AdrianRodriguez, хотя он не является обязательным это способ давать положительные точки тем, кто отвечают вопросы, и это улучшает опыт пользователя в сайте SOes. –  19.01.2017, 12:10
  • 2
    @MarcLemien OP не recibirá твой notificació n, так как не publicó ни одна комментарий в этой publicació n:/ –  19.01.2017, 12:15
  • 3
    Не важно, которому он прочитал это, является хорошей практикой, которую многие не способствуют, кто это прочитал он servirá. –  19.01.2017, 12:16
  • 4
    @MarcLemien на всякий случай, How do comment @replies work? , так как я увидел этот твой ответ случайно. –  19.01.2017, 12:52

Для того, чтобы переменная texto храните размер, быть создавать переменную (elementos например), который подобрал array, который возвращает функцию getElementsByTagName("p")

После ты инициализируешь textos как array с числом элементов равным числу полученных элементов.

После ты повторяешь, как ты делал, но не можешь делать один .lenght прямо но ты должен соглашаться на свойство innerHTML что подбирает текст между этикетками <p> и </p>

Внутри if где ты подтверждаешь, ли он >12 ты должен помещать elementos[i].innerHTML в части izq ассигнования, чтобы менять Ваш контент. (хотя я не понимаю, почему ты помещаешь проверку 12 и в substring ты помещаешь 10)

<script>
    var elementos= document.getElementsByTagName("p");
    var textos =  new Array (elementos.length);
    for(var i=0;i<elementos.length;i++){
        console.log(elementos[i].innerHTML.length+ "");
        textos[i] = elementos[i].innerHTML.length;
        if(elementos[i].innerHTML.length > 12) {
            elementos[i].innerHTML = elementos[i].innerHTML.substring(0,10)+"...";
        }
     }
</script>

    var elementos= document.getElementsByTagName("p");
    var textos =  new Array (elementos.length);
    for(var i=0;i<elementos.length;i++){
      console.log(elementos[i].innerHTML.length+ "");
      textos[i] = elementos[i].innerHTML.length;
      if(elementos[i].innerHTML.length > 12) {
          elementos[i].innerHTML = elementos[i].innerHTML.substring(0,10)+"...";
      }

    }
<p>Probando la funcion javascript</p>
<p>Probando la funcion javascript con distintas longitudes</p>
<p>Probando javascript</p>
<p>Probando la funcion</p>
<p>Probando la funcion javascript otra vez</p>

Относительно где помещения этого, ты можешь помещать это в функцию, которая называлась бы в событии onLoad

5
ответ дан 03.12.2019, 17:37

Теги

Похожие вопросы