How to Visually See What Your jQuery Selection is Selecting

  • read
  • Add to Flipboard Magazine.

Pasted into How to Visually See What Your jQuery Selection is Selecting 1

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 - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Code Snippets / Tutorials
Tags: ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

The Artistic Side of web design 1

Advertise Here