Javascript - для цикла для maxLength на теге P - PullRequest
Новая
       9

Javascript - для цикла для maxLength на теге P

0 голосов
/ 20 сентября 2018

У меня есть это решение, которое ограничивает символы выбранного тега P до 125 символов, однако оно применяется только к первому дочернему элементу в цикле. Как я могу отредактировать следующий код для работы в цикле For?Я пытался решить некоторые проблемы с помощью некоторого jQuery, но не нашел ни одного работающего.

Благодарим за помощь! 

function truncateText(selector, maxLength) {

    var element = document.querySelector(".hp-um-description")
     for (element = element) {
        var truncated = element.innerText;

        if (truncated.length > maxLength) {
            truncated = truncated.substr(0,maxLength) + '...';
        }
        return truncated;  
     }
    }

    $(".hp-um-description").each(function(){
      document.querySelector('.hp-um-description').innerText = truncateText('.hp-um-description', 125);
    });

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Попробуйте этот код: 

function truncateText(element, maxLength) {
    var truncated = element.innerText;
    if (truncated.length > maxLength)
        truncated = truncated.substr(0,maxLength) + '...';
    return truncated;
}
$(function() {
    $(".hp-um-description").each(function(i,obj) {
        obj.innerText = truncateText(obj, 125);
    });
});
0 голосов
/ 20 сентября 2018

В обычном JavaScript вы можете подойти к этому следующим образом ... 

var maxLength = 125;

/* select elements as an Array 
   and iterate with Array.forEach() */

[].slice.call(document.querySelectorAll(".hp-um-description")).forEach(function(el) {
    /* 'el' => each ".hp-um-description" element */

    /* attempt truncation */
    el.innerText = el.innerText.slice(0, maxLength);
    /* if el.innerText.length is shorter than
       'maxLength' the whole String will be returned (unchanged),
       otherwise the String will be truncated (modified) */
});

Эквивалент переменной el в функции JQuery .each() привязан к свойству this обратного вызовавот так ... 

$(".hp-um-description").each(function() {
    /* $(this) => each ".hp-um-description" element */

    var el = $(this);

    /* apply the same conditions as above */
    el.text( el.text().slice(0, maxLength) ); 
});

Надеюсь, что помогло: D

См .:

0 голосов
/ 20 сентября 2018

Вы можете использовать jQuery .text(), чтобы избежать циклов и добиться этого достаточно чисто. 

function truncateText(selector, maxLength) {
  $(selector).text((i, txt) => txt.length > maxLength ? txt.substr(0,maxLength) + "..." : txt);
};

truncateText(".hp-um-description", 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="hp-um-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ipsum massa, et sagittis enim tempus id. Mauris nisl turpis, pellentesque scelerisque congue nec, faucibus vel arcu.</p>

<p class="hp-um-description"> Fusce id ultrices nibh. Suspendisse sit amet felis lobortis, rhoncus ex eu, fringilla lacus.</p>

<p class="hp-um-description">Suspendisse sit amet felis lobortis, rhoncus ex eu, fringilla lacus. Duis vehicula placerat sapien, ac consectetur dolor egestas eget.</p>

Приведенный выше код перебирает все элементы, удовлетворяемые селектором, и применяет функцию.Эта строка определяет, будет ли она усечена или нет: 

     txt.length > maxLength ?    txt.substr(0,maxLength) + "..."     :         txt
//(If length exceeds maxlength)     (truncate and add ...)         (else)    (leave the text as-is)

Если вы хотите иметь возможность также усекать string значения , вы можете использоватькод ниже вместо: 

String.prototype.truncate = function(maxLength) {
  var t = this.toString();
  return t.length > maxLength ? t.substr(0, maxLength) + "..." : t;
};

function truncateText(selector, maxLength) {
  $(selector).text((i, txt) => txt.truncate(maxLength));
};

//Truncate an existing element's text
truncateText(".hp-um-description", 100);

//Truncate a string
console.log("This is a long string that exceeds 30 characters.".truncate(30));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="hp-um-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ipsum massa, et sagittis enim tempus id. Mauris nisl turpis, pellentesque scelerisque congue nec, faucibus vel arcu.</p>

<p class="hp-um-description"> Fusce id ultrices nibh. Suspendisse sit amet felis lobortis, rhoncus ex eu, fringilla lacus.</p>

<p class="hp-um-description">Suspendisse sit amet felis lobortis, rhoncus ex eu, fringilla lacus. Duis vehicula placerat sapien, ac consectetur dolor egestas eget.</p>
...