Using Lodash With jQuery

Leveraging the Lodash library to perform operations on jQuery objects.

by Adam Boduch

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<p>First</p>
<p>Second</p>
<p>Third</p>

CSS

body {
    font-size: 0.8em;
}

JavaScript

$(function() {
   
    var $p = $( "p" );
    
    // Uses lodash.each() to iterate over the jQuery object.
    _.each( $p, function( p ) {
        $( p ).css( "font-weight", "bold" );
    });
    
    // Uses lodash.first() to find the first element.
    $( _.first( $p ) ).css( "text-decoration", "underline" );
    
    // Uses lodash.last() to find the last element.
    $( _.last( $p ) ).css( "text-decoration", "underline" );
    
});