@gravityforms/utils/src/dom/matches-or-contained-in-selectors.js

JavaScript utilities for Gravity Forms development.

/**
 * @module matchesOrContainedInSelectors
 * @description Compares an HTMLElement against an array of selectors to see if it is one of them or is contained within any of them.
 *
 * @since 1.0.0
 *
 * @param {HTMLElement} target    The element to check against.
 * @param {Array}       selectors The array of selectors to test against.
 *
 * @return {boolean} Returns true if the element is one of them or is contained within any of the selectors.
 *
 * @example
 * import { matchesOrContainedInSelectors } from "@gravityforms/utils";
 *
 * function Example() {
 *   const exampleTarget = getNodes( '.some-target-selector', false, document.body, true )[ 0 ];
 *   const exampleSelectors = [ '.node-selector-one', '.node-selector-one' ];
 *   if( matchesOrContainedInSelectors( exampleTarget, exampleSelectors ) ) {
 *      //do something
 *   }
 * }
 *
 */
export default function matchesOrContainedInSelectors( target, selectors ) {
	for ( let i = 0; i < selectors.length; i++ ) {
		const matchingElements = document.querySelectorAll( selectors[ i ] );
		for ( let j = 0; j < matchingElements.length; j++ ) {
			// Check if target matches or is contained within the current matching element
			if ( target === matchingElements[ j ] || matchingElements[ j ].contains( target ) ) {
				return true;
			}
		}
	}
	return false;
}