Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/connorjburton/jquery-bem-utils
Simple BEM integration in jQuery
https://github.com/connorjburton/jquery-bem-utils
Last synced: about 1 month ago
JSON representation
Simple BEM integration in jQuery
- Host: GitHub
- URL: https://github.com/connorjburton/jquery-bem-utils
- Owner: connorjburton
- Created: 2016-04-18T13:52:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-27T11:18:46.000Z (almost 8 years ago)
- Last Synced: 2024-11-09T18:11:52.342Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 313 KB
- Stars: 8
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://codeclimate.com/github/connorjburton/jquery-bem)
# jQuery BEM
Simple BEM integration in jQuery.
# Installation
```
npm i --save-dev jquery-bem-utils
```
```javascript
var $ = require('jquery');
require('jquery-bem-utils');
```
# Usage
Your BEM has to be in the style of `block__element--modifier` for this plugin to work.
**Find Block**
```javascript
findBlock(elementName)
```
```javascript
$('body').findBlock('foo'); // => returns $('.foo--red--padding-large')
```
```html
```
**Find Element**
```javascript
findElement(elementName)
```
```javascript
$('body').findBlock('foo').findElement('bar'); // => returns $('.foo__bar')
```
```html
```
**Get Modifiers**
```javascript
$('body').findBlock('foo').getModifiers(); // => returns ['red', 'padding-large']
```
```html
```
**Has Modifier**
```javascript
hasModifier(modifierName)
```
```javascript
$('body').findBlock('foo').hasModifier('red'); // => returns true
$('body').findBlock('foo').hasModifier('bar'); // => returns false
```
```html
```
**Set Modifier**
```javascript
addModifier(modifierName, unique)
```
```javascript
$('body').findBlock('foo').findElement('bar').addModifier('hello'); // => returns (1)
$('body').findBlock('foo').findElement('bar').filter(':nth-child(2)').addModifier('hello', true); // => returns (2)
$('body').findBlock('foo').findElement('bar').filter(':nth-child(3)').addModifier('hello', true); // => returns (3)
```
*(1)*
```html
```
*(2)*
```html
```
*(3)*
```html
```