https://github.com/vitkarpov/jquery.bem
jQuery.BEM: helps to work with BEM entities using jQuery
https://github.com/vitkarpov/jquery.bem
Last synced: about 2 months ago
JSON representation
jQuery.BEM: helps to work with BEM entities using jQuery
- Host: GitHub
- URL: https://github.com/vitkarpov/jquery.bem
- Owner: vitkarpov
- Created: 2014-12-13T09:49:37.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-01-11T12:56:22.000Z (over 10 years ago)
- Last Synced: 2025-02-18T00:05:32.950Z (2 months ago)
- Language: JavaScript
- Homepage: http://vitkarpov.github.io/jquery.bem/
- Size: 441 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery.BEM
jQuery.BEM helps to work with BEM entities. You can interact with [BEM Tree](http://bem.info/method/definitions/): set, remove and check modifiers.
[http://jsfiddle.net/vitkarpov/ouLr0ctw/](http://jsfiddle.net/vitkarpov/ouLr0ctw/)
## API
### setMod
```js
var $b = $('.block');
// .block_mod
$b.setMod('mod');
// .block_mod_val
$b.setMod('mod', 'val');
```
```js
var $el = $('.block__element');
// .block__element_mod
$el.setMod('mod');
// .block__element_mod_val
$el.setMod('mod', 'val');
```
What if you have mix of blocks or elements on the same node? You have to just specify what block do you want to change using special syntax for mods` keys.
```
block:mod
```
For instance,
```js
var $b = $('.block1 .block2')
// block1_mod_val
$b.setMod('block1:mod', 'val');
// block2_mod_val
$b.setMod('block2:mod', 'val');
```
If you don't specify the block then plugin will change them all
```js
// block1_mod_val block2_mod_val
$b.setMod('mod', 'val');
```
## delMod
Similary to setMod there is delMod method
```js
var $b = $('.block');
// .block_mod => .block
$b.delMod('mod');
```
```js
var $el = $('.block__element');
// .block__element_mod ==> .block__element
$el.delMod('mod');
```
Special syntax for mods` keys to specify block you want to change works as well:
```js
var $b = $('.block1 .block2')
// block1_mod_val => block1 block2_mod_val
$b.delMod('block1:mod');
// block2_mod_val => block1_mod_val block2
$b.delMod('block2:mod');
```
If you don't specify the block then plugin will remove that mod from all blocks added to the node:
```js
// block1_mod_val block2_mod_val => block1 block2
$b.delMod('mod');
```
## hasMod
```js
var $b = $('.block_mod_val');
// true
$b.hasMod('mod');
// true
$b.hasMod('mod', 'val');
// false
$b.hasMod('mod', 'val2');
$b.delMod('mod');
// false
$b.hasMod('mod');
```
```js
var $el = $('.block1 .block2__element_mod');
// true
$el.hasMod('mod');
// false
$el.hasMod('block1:mod');
```
## toggleMod
```js
var $b = $('.block_hidden');
// .block_hidden => .block
$b.toggleMod('hidden');
// .block => .block_hidden
$b.toggleMod('hidden');
```