CODEWITHSUNDEEP
javascriptjqueryloops
Tomi Seus
Tomi Seus

Reputation: 1161

How to limit string length of multiple elements with jquery?

I want to limit the string length of all my $("a.paragraph"). I have the following code:

var paragraph = $("a.paragraph").text();
var maxlength = 500;
var strlength = paragraph.length;
if (strlength > maxlength) {
    var introduction    = paragraph.substr(0,maxlength); // cut string
    var search          = introduction.lastIndexOf(" "); // find position of last space (last word cannot be cut)
    introduction        = introduction.substr(0, search); // cut string until last space
    introduction        = introduction + "..."; // add ... in the end
    $("a.paragraph").text(introduction);
}

This code reworks the first element only and displays the result on all paragraphs. How can I loop every single paragraph?

Upvotes: 0

Views: 2721

Answers (4)

Quintin Robinson
Quintin Robinson

Reputation: 82325

You need to loop over every element. The behavior you are experiencing is the way jQuery works by default.

$("a.paragraph").each(function(i,e) {
    var paragraph = $(e).text();
    var maxlength = 500;
    var strlength = paragraph.length;
    if (strlength > maxlength) {
        var introduction    = paragraph.substr(0,maxlength); // cut string
        var search          = introduction.lastIndexOf(" "); // find position of last space (last word cannot be cut)
        introduction        = introduction.substr(0, search); // cut string until last space
        introduction        = introduction + "..."; // add ... in the end
        $(e).text(introduction);
    }
});

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You need to find each paragraph and loop around them:

$("a.paragraph").each(function() {
    var paragraph = $(this).text();
    var maxlength = 500;
    var strlength = paragraph.length;
    if (strlength > maxlength) {
        var introduction    = paragraph.substr(0,maxlength); // cut string
        var search          = introduction.lastIndexOf(" "); // find position of last space (last word cannot be cut)
        introduction        = introduction.substr(0, search); // cut string until last space
        introduction        = introduction + "..."; // add ... in the end
        $("a.paragraph").text(introduction);
    }
});

Upvotes: 1

Ry-
Ry-

Reputation: 224877

Using .each:

$('a.paragraph').each(function() {
    var paragraph = $(this).text();
    var strlength = paragraph.length;
    if (strlength > maxlength) {
        var introduction    = paragraph.substr(0, maxlength); // cut string
        var search          = introduction.lastIndexOf(" "); // find position of last space (last word cannot be cut)
        introduction        = introduction.substr(0, search); // cut string until last space
        introduction        = introduction + "..."; // add ... in the end
        $(this).text(introduction);
    }
});

Upvotes: 3

mellamokb
mellamokb

Reputation: 56769

You can make use of jQuery's each function:

$('a.paragraph').each(function() {
    var paragraph = $(this).text();
    // ... do stuff here
})

Upvotes: 5

Related Questions