Geek Answers Handbook

Creating Excerpts Using Javascript / jQuery

I am trying to make a fragment of all h3 text somehow using some array methods. But the problem is to select all h3 that I used as a selector

var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text();

And it combines all h3 texts, and finally I get the same text for all h3 texts

How can I highlight all h3 separately?

Here is the JSFiddle

Here is my code:

 var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text(), productTitleExcerpt; var toArray = productTitle.split("", 36), joinArray = toArray.join(''), joinArrayToArray = joinArray.split(" "), joinArrayToArrayPop = joinArrayToArray.pop(), joinArrayToArrayPopPush = joinArrayToArray.push('...'), joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '), productTitleExcerpt = joinArrayToArrayPopPushJoin; $('#products-carousel').find('.single-trending-list').find('h3').text(productTitleExcerpt); 
 <ul class="ul-trending-list" id="products-carousel"> <li> <div class="single-trending-list"> <span>$90.00</span> <h3>Leather Clutch, Gray Distressed</h3> </div> </li> <li> <div class="single-trending-list"> <span>$91.00</span> <h3>Sori Yanagi Butterfly Y Wenge Stool</h3> </div> </li> <li> <div class="single-trending-list"> <span>$31.00</span> <h3>BOTTLIT Canister, 600ml</h3> </div> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I made a DECISION . Now I used each method and also created a function and set 3 arg to pass the element , letter number , extension . So now I can use it anywhere.

Here is the JSFiddle

And here is the code you can see here.

 var originalCarouselH3 = $('#products-carousel').find('.single-trending-list').find('h3'); function excerpt(excerptElement, number , more = "..."){ excerptElement.each(function(){ var productTitle = $(this).text(), productTitleExcerpt, toArray = productTitle.split("", number), joinArray = toArray.join(''), joinArrayToArray = joinArray.split(" "), joinArrayToArrayPop = joinArrayToArray.pop(), joinArrayToArrayPopPush = joinArrayToArray.push(more), joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '), productTitleExcerpt = joinArrayToArrayPopPushJoin; if(productTitle.length > number){ productTitle = productTitleExcerpt; $(this).text(productTitle); } }); } excerpt(originalCarouselH3, 30); 
 <ul class="ul-trending-list" id="products-carousel"> <li> <div class="single-trending-list"> <span>$90.00</span> <h3>Leather Clutch, Gray Distressed</h3> </div> </li> <li> <div class="single-trending-list"> <span>$91.00</span> <h3>Sori Yanagi Butterfly Y Wenge Stool</h3> </div> </li> <li> <div class="single-trending-list"> <span>$31.00</span> <h3>BOTTLIT Canister, 600ml</h3> </div> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+6
source share
5 answers

There is actually a jQuery plugin called Succinct that cuts off the text. This plugin supports multi-line text. But if you do not want to include this plugin, and you only need to trim the text in the line, it is easy to create.

Here is the easiest way to do what you are trying to do using jQuery.

 $('#products-carousel .single-trending-list h3').each(function() { $(this).text($(this).text().substr(0, 36) + '...'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="ul-trending-list" id="products-carousel"> <li> <div class="single-trending-list"> <span>$90.00</span> <h3>Leather Clutch, Gray Distressed</h3> </div> </li> <li> <div class="single-trending-list"> <span>$91.00</span> <h3>Sori Yanagi Butterfly Y Wenge Stool</h3> </div> </li> <li> <div class="single-trending-list"> <span>$31.00</span> <h3>BOTTLIT Canister, 600ml</h3> </div> </li> </ul>

But...

The right way to do this would be to use CSS to truncate the text. This will leave the text unmodified, but will only display truncated.

 .single-trending-list h3 { width: 11em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="ul-trending-list" id="products-carousel"> <li> <div class="single-trending-list"> <span>$90.00</span> <h3>Leather Clutch, Gray Distressed</h3> </div> </li> <li> <div class="single-trending-list"> <span>$91.00</span> <h3>Sori Yanagi Butterfly Y Wenge Stool</h3> </div> </li> <li> <div class="single-trending-list"> <span>$31.00</span> <h3>BOTTLIT Canister, 600ml</h3> </div> </li> </ul>

JQuery plugins for salvation!

 (function($) { $.fn.truncate = function(length) { this.text(function(idx, txt) { return txt.length > length ? txt.substr(0, length) + '…' : txt; }); } $.fn.truncateCss = function(width) { this.each(function() { $(this).css({ width : width, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }); }); } } (jQuery)); // ====================================================================== // USE EITHER ONE // ====================================================================== $('#products-carousel .single-trending-list h3').truncate(22); //$('#products-carousel .single-trending-list h3').truncateCss('11em'); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="ul-trending-list" id="products-carousel"> <li> <div class="single-trending-list"> <span>$90.00</span> <h3>Leather Clutch, Gray Distressed</h3> </div> </li> <li> <div class="single-trending-list"> <span>$91.00</span> <h3>Sori Yanagi Butterfly Y Wenge Stool</h3> </div> </li> <li> <div class="single-trending-list"> <span>$31.00</span> <h3>BOTTLIT Canister, 600ml</h3> </div> </li> </ul>
+7
source

Instead of finding all the signatures at the same time, scroll through each h3 found and hit the header on the array.

 var productTitle =[]; $('#products-carousel').find('.single-trending-list').find('h3').each( function() { productTitle.push($(this).text()) } )

The productTitle value in the above JSFiddle example will be:

["Leather Clutch, Gray Distressed", "Sori Yanagi Butterfly Y Wenge Stool", "BOTTLIT Canister, 600ml"]

Then you can iterate over each value in an array with a for loop and do what you want with it.

+3
source

Try using the callBack function .text() to achieve the desired result,

 $('#products-carousel .single-trending-list h3').text(function(_, txt) { return txt.length > 36 ? txt.substr(0, 36) + "..." : txt; });

Demo

+1
source

The shortest way to do this, I think, is this.

 $(".your-selector").each(function() { $(this).text($(this).text().substr(0, 140) + "..."); });

Please note that “140” can be changed according to the desired length.

0
source

This question has long been resolved, but I thought I would send my solution if it would help other digital travelers / men in search of a passage!

I wanted to cut the original string into white space . In this case, I found lastIndexOf quite useful!

 if (someString.length > EXCERPT_MAX_LENGTH) { excerpt = someString.substring(0, EXCERPT_MAX_LENGTH); excerpt = excerpt.substring(0, excerpt.lastIndexOf(' ')); excerpt += '...'; }

Please note that I am adding Ellipsis to the end of the cutting line!

0
source

More articles:


All Articles