How to Visually See What Your jQuery Selection is Selecting

I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database.

I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and I wanted to see visually what my jQuery selection was doing. Then I remembered a CSS trick I have used with CSS to wrap all block-level elements with a border to see how it is used in a layout.

* {border:1px solid red;}

So what I decided to do was create a custom jQuery function I could reuse when I wanted to test my selection. Once I know I am targeting the right element I can continue writing the rest of my code.

Inspect element selection with jQuery custom function

  // create a custom jQuery function to outline element
  $.fn.inspect = function() {
    $(this).css("border", "2px dashed red");
  }; 
  
  // Test your selection using this function
  $('.list-group li:nth-child(3)').inspect();

View Demo