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();