Question

I have a JQuery function that randomly chooses a DIV in a page full of DIVs. I’m trying to modify the function so that it checks the length of the H3 tag nested in the random DIV. If the string inside the H3 tag is over 10 characters long (including whitespace), the function should truncate the string and replace the contents of the H3 with this new shorter string and display it.

Example:
(jquery)

if ($('#main').length !== 0) {
    var new_item = $('#main div').eq(Math.floor(Math.random() * $('#main div').length));    
    new_item.css('display','block');
}

(html file)

<div id="main">
  <div id="m1" style="display:none;">
    <h3>Apples are red</h3>
  </div>
  <div id="m2" style="display:none;">
    <h3>Oranges are orange</h3>
  </div>
  <div id="m3" style="display:none;">
    <h3>Bananas are yellow</h3>
  </div>
</div>

(desired output – what user sees if DIV#m2 is randomly selected)

Oranges ar

Answer 1

$(new_item).find('h3').text($(new_item).find('h3').text().substr(0,10));