Javascript to select all <h3>'s, get their length, add class if greater than 30 characters

Question

I have a site created using Joomla, and I've created a blog layout using masonry. Right now the columns are all using the same width so it's masonry with 3 columns of even width. I want to create a function that can grab all the "h3.g-item-title" and store them into an array; then I want to be able to use the length property to determine the length of each h3; then I want to test if the length of characters is greater than 30, if so, add an additional class to the h3's parent div so that in CSS I can create a second class to give articles with longer titles a greater width in masonry.

In theory I understand how to execute each step, but putting them together I am getting lost (new to learning Javascript). In English, here are the steps I believe I need, can someone please critique my thinking if needed and help me code this out?

1. Create an array variable that stores all the h3's with my desired class.
2. Then I need to test the length of each of these h3's and store that value with each correct title.
3. Then I need to test if this h3 has a greater length than 30 characters, and if so, add an additional class to it, if it's not greater than 30, then nothing is added.

Here's the markup of each article to show the div structure and class names:

<div class="g-grid" style="position: absolute; left: 15.008px; top: 15.008px;">
    <div class="g-block">
        <div class="g-content">
            <div class="g-array-item">
                <div class="g-array-item-title">
                    <h3 class="g-item-title">
                        <a href="/writingCommons-1/index.php?option=com_content&amp;view=article&amp;id=1312:data-visualizations&amp;catid=479:stem-technical-writing&amp;Itemid=548">Data Visualizations</a>
                    </h3>
                </div>
                <div class="g-array-item-details">
                    <span class="g-array-item-date"><i class="fa fa-clock-o"></i>Thursday, September 15, 2016</span>
                    <span class="g-array-item-author"><i class="fa fa-user"></i>Katherine McGee</span>
                    <span class="g-array-item-category">
                        <a href="/writingCommons-1/index.php?option=com_content&amp;view=category&amp;id=452&amp;Itemid=101"><i class="fa fa-folder-open"></i>Writing Commons Book</a>
                        <a href="/writingCommons-1/index.php?option=com_content&amp;view=category&amp;id=206&amp;Itemid=966"><i class="fa fa-folder-open"></i>Genres</a>
                        <a href="/writingCommons-1/index.php?option=com_content&amp;view=category&amp;id=479&amp;Itemid=548"><i class="fa fa-folder-open"></i>STEM/Technical Writing</a>
                    </span>
                    <span class="g-array-item-hits"><i class="fa fa-eye"></i>1024</span>
                </div>
            </div>
        </div>
    </div>
</div>

The width is applied to the top div with class "g-grid", so it's the element I want to add a class to if the h3 within it has a length greater than 30. Is this possible and can anyone help walk me through coding this?

Thanks :)

Answer 1

Do this:

Array.prototype.slice.call(document.querySelectorAll('h3.g-item-title'))
    .filter( node => node.textContent.trim().length > 30)
    .forEach( node => node.classList.add("g-grid"));

Array.prototype.slice.call is a dirty trick to turn your NodeList into an Array. In that way, you get access to filter and forEach methods that let you filter out the nodes that are lengthier than 30 characters and add a class to them.

Note that the Array.prototype.slice.call trick won't work on IE. Instead you have to wrap every node in your NodeList in an array and then filter and modify them:

var myNodeList = document.querySelectorAll('li');
var myArrayFromNodeList = []; // empty at first
for (var i = 0; i < myNodeList.length; i++) {
  myArrayFromNodeList.push(myNodeList[i]); // ahhh, push it
}

This last bit was taken from here: https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/#problem3-separation-of-concerns