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