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


bootstrap 4 books

Learn Bootstrap 4 Fast - Books

Learn More

Advertise Here

Written by: Jacob Lett - Jacob is an experienced website designer and developer who specializes in building HubSpot CMS themes. He helps Industrial companies optimize and leverage their website for awareness, lead generation, and branding.
Category: Code Snippets / Tutorials
Tags: ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here