Creating excerpt using Javascript/jQuery
<p>I am trying to make excerpt of all <strong>h3</strong> text with some manner using some array methods. But the problem is to select all <strong>h3</strong> I used as selector is</p>

<pre><code>var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text();
</code></pre>

<p>And it grabs all <strong>h3</strong> texts together and finally I get same text for all <strong>h3</strong></p>

<p>How can I select all <strong>h3</strong> individually?</p>

<p>Here is <a href="https://jsfiddle.net/Jim_Fahad/8s3Lturh/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=8s3Lturh" rel="nofollow">JSFiddle</a></p>

<p>Here is my Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="ul-trending-list" id="products-carousel"&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$90.00&lt;/span&gt;
      &lt;h3&gt;Leather Clutch, Gray Distressed&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$91.00&lt;/span&gt;
      &lt;h3&gt;Sori Yanagi Butterfly Y Wenge Stool&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$31.00&lt;/span&gt;
      &lt;h3&gt;BOTTLIT Canister, 600ml&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>I've made a <strong>SOLUTION</strong> . Now I've used <strong>each method</strong> and also create a function and set 3 <strong>arg</strong> to pass <strong>element</strong>, <strong>letter number</strong>, <strong>extension</strong> optional. So now I can use it anywhere.</p>

<p>Here is <a href="https://jsfiddle.net/Jim_Fahad/c56osLt6/" rel="nofollow">JSFiddle</a></p>

<p>And Here is the code you can see here.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; number){
   productTitle = productTitleExcerpt;
   $(this).text(productTitle);
  }
  });
 }

 excerpt(originalCarouselH3, 30);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="ul-trending-list" id="products-carousel"&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$90.00&lt;/span&gt;
      &lt;h3&gt;Leather Clutch, Gray Distressed&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$91.00&lt;/span&gt;
      &lt;h3&gt;Sori Yanagi Butterfly Y Wenge Stool&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="single-trending-list"&gt;
      &lt;span&gt;$31.00&lt;/span&gt;
      &lt;h3&gt;BOTTLIT Canister, 600ml&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>