jQuery.BEM

jQuery.BEM is small jQuery plugin for comfortable working with HTML made by BEM methodology.

Selecting elements

<div class="b-product">
  <div class="b-product__name">Coffe</div>
  <div class="b-product__price">$2</div>
</div>
<div class="b-product">
  <div class="b-product__name">Tea</div>
  <div class="b-product__price">$1</div>
</div>

Getting block

$('.b-product:first').elem('name').block();         // $('.b-product:first > .b-product__name').closest('.b-product')

Getting element

$('.b-product:first').elem('name').block();         // $('.b-product:first > .b-product__name').closest('.b-product')

Working with modifiers

Setting modifier

<div class="b-product">...</div>

$('.b-product').mod('theme', 'premium');  // will get .b-product.b-product_theme_premium
$('.b-product').mod('premium', true);     // will get .b-product.b-product_premium

Remove modifier

<div class="b-product b-product_theme_premium">...</div>

$('.b-product').delMod('theme', 'premium');  // $('.b-product').removeClass('b-product_theme_premium');
$('.b-product').delMod('theme');             // remove the modifier "theme" of any value (.b-product_theme_*)
$('.b-product').mod('theme', false);         // same

Getting modifier

<div class="b-product b-product_theme_premium">...</div>

$('.b-product').mod('theme')      // will return "premium"
$('.b-product').mod('discount');  // will rerurn null (non-existent modifier)

Checking modifier

<div class="b-product b-product_theme_premium">...</div>

$('.b-product').hasMod('theme');             // true
$('.b-product').hasMod('theme', 'premium');  // true
$('.b-product').hasMod('theme', 'discount')  // false

Toggle modifier

<div class="b-product">...</div>

$('.b-product').toggleMod('theme', 'premium', 'discount');
$('.b-product').hasMod('theme', 'premium');  // true
$('.b-product').hasMod('theme', 'discount')  // false
$('.b-product').toggleMod('theme', 'premium', 'discount');
$('.b-product').hasMod('theme', 'premium');  // false
$('.b-product').hasMod('theme', 'discount')  // true

Filtering by modifier

<div class="b-product b-product_theme_premium">...</div>
<div class="b-product">...</div>

$('.b-product').byMod('theme', 'premium');     // instead of $('.b-product.b-product_theme_premium')
$('.b-product').byNotMod('theme', 'premium');  // instead of $('.b-product').not('.b-product_theme_premium')
$('.b-product').byMod('theme');                // filtering by modifier "theme" of any value (?)

Events

You can subscribe to setmod and delmod events for obtain modifier data at the time thier setting or removal.

$('.block').on('setmod', function(e, modKey, modVal) {});
$('.block').on('delmod', function(e, modKey, modVal) {});

Switching context

Use .ctx function for change block context. For sample:

<div class="block">
  <div class="block__elem some-block">
    <div class="some-block__elem"></div>
  </div>
</div>

$('.block').elem('elem').ctx('some-block').elem('elem');

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

maxpoletaev / jquery-bem

Programming Languages