How to Visually See What Your jQuery Selection is Selecting


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

 



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter