How to Visually See What Your jQuery Selection is Selecting

  • read

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.

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

View Demo

 

Written by: Jacob Lett - An experienced website design & SEO optimization consultant who helps B2B industrial companies grow their revenue. He recently created Industrial Pro Website Templates to help manufacturers quickly build their website on the HubSpot CMS platform and leverage a CRM. Connect on LinkedIn
Category: Code Snippets / Tutorials
Tags: ,