How to Visually See What Your jQuery Selection is Selecting

  • Updated on
  • read
  • Add to Flipboard Magazine.

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 started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Code Snippets / Tutorials
Tags: ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.