Exploring jQuery with A Fresh Eye

This week, I picked up a work item for my organization that involved jQuery. The description and technical analysis of the work item were presented in vanilla JavaScript. When I looked into the file where the solution was to be written, I noticed a whole lot of $. It took me a couple of minutes before I realized it was jQuery!

The Flatiron School curriculum frequently reminded students that although we were being taught ES6 and React, we would encounter different frameworks and older code bases in our work. I felt pretty good that I was able to determine what the code was that I was reviewing despite my initial confusion!

The goal of the work item is to iterate through a <div> that has multiple <p> tags containing descriptions; if those descriptions are longer than set amount of characters, the description should be truncated and an ellipsis (...) should be added to the end. The person that completed the technical analysis had done some of the work to target the proper set of <p> elements that would need to be changed but I couldn't immediately determine how to finish the code. An additional complication to the work is the solution required another person's code changes that weren't yet complete to run the code.

I coded as much as I could before finishing work for the week. On the weekend, I was determined to understand how I could properly target elements using jQuery. I could see that the basic method to access elements was the same as I had learned for vanilla JavaScript, so it was just a matter of figuring out how jQuery differed. I researched W3 schools and the jQuery documentation and learned that code needed to be enclosed in the $(document).ready function and that elements were access via $().

$(document).ready(function () {
    return true
});

Elements are targeted in a very similar way to vanilla JavaScript by using HTML elements, classes and IDs to target the specific element to change.

$("#test").find("p")

I found my old friend this helped me to sort out the <p> tags appropriately. I made a special effort to really understand how this functions in JavaScript (there are many well-written blogs on this topic!) so I when I was trying to figure out how to iterate items that were enclosed by a specific element, I could use this to access them in turn.

$(this).text(truncate($(this).text()));

I was able to use CodePen to set up a working example based on my memory of the code structure from my work project. Having worked through the problem on an example I set up, I believe I will be able to set up a similar example on Monday when I have the actual code in front of me.

$(document).ready(function () {
  var testParas = $("#test").find("p");
  testParas.each(function () {
    $(this).text(truncate($(this).text()));
  });
});

I know that with each problem we solve, we strengthen our learning and abilities. I am looking forward to continuing to learn and support the existing code base at my organization while expanding my knowledge of various JavaScript libraries like jQuery.