jQuery group selectors

README.md

Simple jQuery solution for grouping multiple selectors

Issue

Sometimes I have multiple jQuery variables that I want to perform the same action on. So I find myself doing something like...

var $header = $( 'body > header' );
var $nav = $( 'body > nav.burger-menu' );

$header.addClass( 'menu-open' );
$nav.addClass( 'menu-open' );

OR something like...

var menuOpen = ( $el ) => $el.addClass( 'menu-open' );

var $header = $( 'body > header' );
var $nav = $( 'body > nav.burger-menu' );

menuOpen( $header );
menuOpen( $nav );

Solution

With the simple group function found in this gist we can do the following...

var $header = $( 'body > header' );
var $nav = $( 'body > nav.burger-menu' );

$.group( $header, $nav ).addClass( 'menu-open' );

Supports

Because we're use the core jQuery function add we can use all supported types of selectors. For example, if you wanted to you could...

var $header = $( 'body > header' );

$.group( $header, 'ul > li:not(.active)', $( '.gallery' ).find( '.item' ) );

jquery.group.js

( function( $ ) {
	'use strict';
	
	/**
	 * Group multiple jQuery selectors into a single jQuery object
	 *
	 * @param	{Mixed}		$args,...	Pass each selector as its own argument
	 * @return	{Object}				Returns a jQuery object of grouped selector elements
	 */
	$.group = function() {
		let $return = $();

		for ( let i = 0; i < arguments.length; i++ ) {
			$return = $return.add( arguments[ i ] );
		}

		return $return;
	};
	
} )( jQuery || window.jQuery );