custom-jquery-methods

🇺🇸 English | 🇷🇺 Русский язык

Custom jQuery methods ($.fn)

Basically, methods are intended for use with the webpack bundler system, there is also the ability to connect methods via direct links in browser or download them (see description of each method)

Installations

npm i --save custom-jquery-methods
# or using yarn cli 
yarn add custom-jquery-methods

Methods

methods list

• $.fn.nodeName()
• $.fn.addClassSiblingsRemove()
• $.fn.changeMyClass()
• $.fn.getMyElements()
• $.fn.hasInitedKey()
• $.fn.removeInitedKey()

You can include all methods by one file

nodejs:

// es6
import 'custom-jquery-methods';
// or minimised version
import 'custom-jquery-methods/fn/index.min';
 
// es5
require('custom-jquery-methods');
// or minimised version
require('custom-jquery-methods/dist/index.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/index.js
• https://unpkg.com/custom-jquery-methods@latest/dist/index.min.js

---

$.fn.nodeName ()

↑ methods list

Returns nodeName property of DOM element in lowercase.
Useful when you can get unknown elements.

Examples:

function myFunction ($el) {
    switch ($el.nodeName()) {
        case 'img':
            // ...
            break;
        case 'div':
            // ...
            break;
        case 'input':
            // ...
            break;
        default:
            // ...
    }
}

nodejs:

// es6
import 'custom-jquery-methods/fn/node-name';
// or minimised version
import 'custom-jquery-methods/fn/node-name.min';
 
// es5
require('custom-jquery-methods/dist/node-name');
// or minimised version
require('custom-jquery-methods/dist/node-name.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/node-name.js
• https://unpkg.com/custom-jquery-methods@latest/dist/node-name.min.js

---

$.fn.addClassSiblingsRemove (cssClass [, customPath])

↑ methods list

Adding a class to the current element and deleting from adjacent elements

Parameters:

Name	Type	Attributes	Description
cssClass	string		The class to be added
customPath	string[]	<optional>	Custom path to adjacent elements

Examples:

example 1. On the same level

$('.item').addClassSiblingsRemove('is-active');
 
// it will reproduce
$('.item').addClass('is-active').siblings().removeClass('is-active');

example 2. At the level of the parent elements with customPath parameter

$('.item').addClassSiblingsRemove('is-active', ['parent', 'siblings', 'children']);
 
// it will reproduce
$('.item').addClass('is-active').parent().siblings().children().removeClass('is-active');

example 3. Also, customPath allows you to use a dynamically calculated path depending on the conditions you need

let customPath = ['parent', 'siblings', 'children'];
if (condition1) {
    customPath.unshift('parent');
} else if (condition2) {
    customPath = ['next'];
} else if (condition3) {
    customPath = ['prev'];
}
$('.item').addClassSiblingsRemove('is-active', customPath);
 
// it will reproduce
if (condition1) {
    $('.item').addClass('is-active').parent().parent().siblings().children().removeClass('is-active');
} else if (condition2) {
    $('.item').addClass('is-active').next().removeClass('is-active');
} else if (condition3) {
    $('.item').addClass('is-active').prev().removeClass('is-active');
} else {
    $('.item').addClass('is-active').parent().siblings().children().removeClass('is-active');
}

nodejs:

// es6
import 'custom-jquery-methods/fn/add-class-siblings-remove';
// or minimised version
import 'custom-jquery-methods/fn/add-class-siblings-remove.min';
 
// es5
require('custom-jquery-methods/dist/add-class-siblings-remove');
// or minimised version
require('custom-jquery-methods/dist/add-class-siblings-remove.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/add-class-siblings-remove.js
• https://unpkg.com/custom-jquery-methods@latest/dist/add-class-siblings-remove.min.js

---

$.fn.changeMyClass (condition, previouslyAdded, className[, onChange])

↑ methods list

Add className if previously was removed.
Remove className if previously was added.

Returns boolean - className was added or not!

Parameters:

Name	Type	Attributes	Description
needToAdd	boolean		add className ?
previouslyAdded	boolean		was className previously added or not
className	string / string[] / function		see api.jquery.com/addClass and api.jquery.com/removeClass
onChange	function	<optional>

Usage example:

/**
 * @param {jQuery} $section 
 * @param {jQuery} $frontier 
 */
function showSection ($section, $frontier) {
    const $window = $(window);
    let previouslyAdded = $section.hasClass('show'); // <--
    $window.on('scroll', () => {
        const top = $window.scrollTop();
        const height = $frontier.offset().top + $frontier.outerHeight();
        previouslyAdded = $section.changeMyClass(top > height, previouslyAdded, 'show');  // <--
    });
}

nodejs:

// es6
import 'custom-jquery-methods/fn/change-my-class';
// or minimised version
import 'custom-jquery-methods/fn/change-my-class.min';
 
// es5
require('custom-jquery-methods/dist/change-my-class');
// or minimised version
require('custom-jquery-methods/dist/change-my-class.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/change-my-class.js
• https://unpkg.com/custom-jquery-methods@latest/dist/change-my-class.min.js

---

$.fn.getMyElements (dataKey, selector [, direction][, notSelf])

↑ methods list

Search on the page or retrieve from the data of the desired item.

First, look at the data object on a certain property.
If it is empty - look for the element on the specified selector in the given direction. When found, write it in the data object to at subsequent calls - we get from the data, faster and without searching.

!!! If called element more then one,
then the method is performed only for the first

Parameters:

Name	Type	Attributes	Default	Description
dataKey	string			the property key from the data object of the element
selector	JQuery.Selector			search selector
direction	string/JQuery	<optional>	"document"	direction where to look for - [closest, parent, children, find, prev, next, siblings], or can be jQuery element for find selector inside
notSelf	boolean	<optional>		ignore the current element, when searching for elements, for example in document using the same selector as the current element

Returns:

jQuery.<Element> | undefined

Examples:

example 1. Find / retrieve nested items

let $els = $('.wrapper').getMyElements('$myEls', '.els-selector', 'find');

example 2. Find / retrieve nested items only in context block

let $context = $('.demo');
let $els = $('.wrapper').getMyElements('$myEls', '.els-selector', $context);

example 3. Finding / getting the parent element

let $wrapper = $('.els').getMyElements('$myWrapper', '.wrapper-selector', 'closest');

example 4. Search / retrieve similar items except for the current one

let $sameEls = $('.els').getMyElements('$mySameEls', '.els', 'document', true);

nodejs:

// es6
import 'custom-jquery-methods/fn/get-my-elements';
// or minimised version
import 'custom-jquery-methods/fn/get-my-elements.min';
 
// es5
require('custom-jquery-methods/dist/get-my-elements');
// or minimised version
require('custom-jquery-methods/dist/get-my-elements.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/get-my-elements.js
• https://unpkg.com/custom-jquery-methods@latest/dist/get-my-elements.min.js

---

$.fn.hasInitedKey (key [, setKey])

↑ methods list

Check for the existence of an initialization key in .data().

Parameters:

Name	Type	Attributes	Default	Description
key	string			key name
setKey	boolean	<optional>	true	set the key, if not exist

Returns:

boolean

Examples:

example 1. Check in cycle .each()

let initKey = 'my-key';
$('.my-elements').each((i, el) => {
    let $element = $(el);
    if ($element.hasInitedKey(initKey)) {
        return true;
    }
    // process current element
});

example 2. Check for single element

let initKey = 'my-key';
let $myEl = $('.my-elements');
if (!$myEl.hasInitedKey(initKey)) {
    // process current element
}

nodejs:

// es6
import 'custom-jquery-methods/fn/has-inited-key';
// or minimised version
import 'custom-jquery-methods/fn/has-inited-key.min';
 
// es5
require('custom-jquery-methods/dist/has-inited-key');
// or minimised version
require('custom-jquery-methods/dist/has-inited-key.min');

browser / download:

• https://unpkg.com/custom-jquery-methods@latest/dist/has-inited-key.js
• https://unpkg.com/custom-jquery-methods@latest/dist/has-inited-key.min.js

---

$.fn.removeInitedKey (key)

↑ methods list

Removing an initialization key in .data(). The method is the inverse action for $.fn.hasInitedKey

Parameters:

Name	Type	Attributes	Default	Description
key	string			имя ключа

Returns:

jQuery.<Element> - this

Examples:

let initKey = 'my-key';
let $myEl = $('.my-elements');
$myEl.removeInitedKey(initKey);

nodejs / browser / download:

The method is described in the same file as $.fn.hasInitedKey, accordingly, you get both methods.

---

Project Info

• Change log
• Contributing Guidelines
• Contributor Covenant Code of Conduct
• License MIT