# DOM

Wee makes modifying and extracting data from your markup easy with a robust set of DOM functions. We’ve only included what you need without the cruft. You can also chain your methods.

# $addClass

Add classes to each matching selection

# Single

Wee.$addClass('ref:element', 'modifier');

# Multiple

Separate multiple class names with spaces.

Wee.$addClass('ref:element', 'modifier modifier2');

# Function

The current index and class value are injected into the callback. The scope of this is the element.

Wee.$addClass('ref:element', function(i, className) {
    // Add an indexed classreturn className + i;
});

Callbacks can also be in the format of 'controllerName:method'. The index argument is always 0-based.

# $after

Insert selection or markup after each matching selection

# Selection

Wee.$after('ref:element', Wee.$('.js-element'));

# Markup

Wee.$after('ref:element', '<span>Injected notice</span>');

# Function

The current index and HTML are injected into the callback. The scope of this is the element.

<div data-name="John Smith">
    <h1 data-ref="bioName">Name</h1>
</div>

Wee.$after('ref:bioName', function(i, html) {
    // Add the parent data-name as a paragraph after the matched elementreturn'<p>' + Wee.$data(Wee.$parent(this), 'name') + '</p>';
});

<div data-name="John Smith">
    <h1 data-ref="bioName">Name</h1>
    <p>John Smith</p>
</div>

# $append

Append selection or markup after each matching selection

# Selection

Wee.$append('ref:element', Wee.$('.js-element'));

# Function

The current index and HTML are injected into the callback. The scope of this is the element.

<h1 data-ref="listHeading">Names</h1>
<ul>
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>

Wee.$append('ref:listHeading', function(i, html) {
    // Modify the heading to include the number of listed namesreturn' (' + Wee.$children(Wee.$next()).length + ')';
});

<h1 data-ref="listHeading">Names (2)</h1>
<ul>
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>

# $attr

Get attribute of first matching selection or set attribute of each matching selection

# Get

Wee.$attr('ref:element', 'href');

'https://www.weepower.com'

# Single

Wee.$attr('ref:element', 'href', 'https://www.weepower.com/start');

# Multiple

Wee.$attr('ref:element', {
    href: 'https://developer.mozilla.org',
    target: '_blank'
});

# $before

Insert selection or markup before each matching selection

# Selection

Wee.$before('ref:element', Wee.$('.js-element'));

# Markup

Wee.$before('ref:element', '<span>Injected notice</span>');

# Function

Wee.$before('ref:element', function(i, html) {
    // Callback logic
});

# $children

Get unique direct children of each matching selection

# All Children

Without a filter all direct children will be returned.

Wee.$children('ref:element');

# Filtered

With a filter, only matching children will be returned.

Wee.$children('ref:element', 'li');

The response excludes text and comment nodes.

# $clone

Clone each matching selection

Wee.$clone('ref:element');

# $closest

Get unique closest ancestors of each matching selection

<div class="nav">
    <a class="link--account">Your Account</a>
</div>
<div class="nav">
    <a class="link--about">About Us</a>
</div>

Wee.$closest('.link--about', '.nav');

<div class="nav">
    <a class="link--about">About Us</a>
</div>

This method traverses up the DOM for the closest match. It doesn't match descendants.

# $contain

Determine if any matching parent selection contains descendant selection

Wee.$contains('ref:element', '.descendant');

true

# $contents

Get unique content of each matching selection

Wee.$contents('ref:element');

The response includes text and comment nodes.

# $css

Get CSS value of first matching selection or set value of each matching selection

# Get Value

Wee.$css('ref:element', 'marginTop');

"0px"

# Set Single Value

Wee.$css('ref:element', 'marginTop', '5px');

# Set Multiple Values

Wee.$css('ref:element', {
    marginTop: '5px',
    color: 'red'
});

# $data

Get data of first matching selection or set data of each matching selection

# Get All

<div data-ref="element" data-id="150"></div>

Wee.$data('ref:element');

{
    ref: "element",
    id: 150
}

# Get Single

<div data-ref="element" data-id="150"></div>

Wee.$data('ref:element', 'id');

150

# Set Single

Wee.$data('ref:element', 'id', '250');;

# Set Multiple

Wee.$data('ref:element', {
    id: '350',
    active: 'true'
});

# $empty

Remove child nodes from each matching selection

<div data-ref="bio">
    <h1>John Smith</h1>
    <p>Lorem ipsum dolor.</p>
</div>

Wee.$empty('ref:bio');

<div data-ref="bio"></div>

# $eq

Get indexed node of matching selection

<ul class="js-element">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

Wee.$eq('.js-element li', 1);

<li>List item 2</li>

# Negative Index

Wee.$eq('.js-element li', -1);

<li>List item 3</li>

# $filter

Return a filtered subset of elements from a matching selection

# Selection

Wee.$filter('ref:element', '.filter');

# Function

The current index and element are injected into the callback. The scope of this is the element.

<ul class="people">
    <li>John Doe</li>
    <li>John Smith</li>
    <li>Jane Doe</li>
    <li>Jane Smith</li>
</ul>

Wee.$filter('.people li', function(i, el) {
    // Return elements containing 'Doe'return Wee.$text(el).indexOf('Doe') !== -1;
});

[<li>John Doe</li>, <li>Jane Doe</li>]

# $find

Get unique filtered descendants from each matching selection

Wee.$find('table', 'tr');

# $first

Get the first element of a matching selection

Works the same as Wee.$() but only returns the first result from the result set.

var $first = Wee.$first('ref:element');

# $hasClass

Determine if the matching selection has a class

# Single

<div class="hello" data-ref="element"></div>

$('ref:element').hasClass('hello');
$('ref:element').hasClass('donuts');

true
false

# $height

Get or set the height of each matching selection

# Get

Wee.$height('ref:element');

100

# Outer Height

Wee.$height('ref:element', true);

120

The value returned is a unitless pixel value.

# Set

Wee.$height('ref:element', '10rem');

# Function

The current index and height are injected into the callback. The scope of this is the element.

<div data-ref="example" style="height: 100px;"></div>

Wee.$height('ref:example', function(i, height) {
    // Increase the height of the element by 50pxreturn (height += 50) + 'px';
});

If no unit is provided pixels will be set.

# $hide

Hide each matching selection

Hide works by adding the js-hide class which applies display: none !important;

Wee.$hide('ref:element');

# $html

Get inner HTML of first selection or set each matching selection's HTML

<div data-ref="element">
    <h1>Heading</h1>
</div>

# Get

Wee.$html('ref:element');

"<h1>Heading</h1>"

# Set

Wee.$html('ref:element', '<h2>New Heading</h2>');

# Function

The current index and HTML are injected into the callback. The scope of this is the element.

Wee.$html('.js-element', function(el, i, html) {
    // Return uppercase HTMLreturn html.toUpperCase();
});

# $index

Get the zero-based index of a matching selection relative to it's siblings

<ul>
    <li></li>
    <li></li>
    <li class="js-last"></li>
</ul>

Wee.$index('.js-last');

2

# $insertAfter

Insert each matching source selection element after each matching target selection

Wee.$insertAfter('ref:element', '.js-element');

# $insertBefore

Insert each matching source selection element before each matching target selection

Wee.$insertBefore('ref:element', '.js-element');

# $is

Determine if at least one matching selection matches a specified criteria

# Selection

<div class="js-element"></div>

Wee.$is('.js-element', 'div');

true

# Function

<ul class="names">
    <li>John Doe</li>
    <li data-hidden="true">Jane Doe</li>
    <li>John Smith</li>
    <li>Jane Smith</li>
</ul>

Wee.$is('.names li', function(i, el) {
    // Check if data-hidden is set to truereturn Wee.$data(el, 'hidden') === 'true';
});

true

# $last

Get the last element of a matching selection

Works the same as Wee.$() but only returns the last result from the result set.

<ul class="names">
    <li>John Doe</li>
    <li>John Smith</li>
    <li>Jane Doe</li>
    <li>Jane Smith</li>
</ul>

Wee.$last('.names li');

<li>Jane Smith</li>

# $next

Get the unique next sibling of each matching selection

# Simple

Wee.$next();

# Filtered

<ul>
    <li>John Doe</li>
    <li>John Smith</li>
    <li data-ref="name">Jane Doe</li>
    <li>Jane Smith</li>
</ul>

Wee.$next('ref:name');

<li>Jane Smith</li>

# $not

Returns elements not matching the filtered selection

# Selection

Wee.$not('ref:element', 'div');

# Function

The current index and element are injected into the callback. The scope of this is the element.

<ul class="names">
    <li>John Doe</li>
    <li data-hidden="true">Jane Doe</li>
    <li>John Smith</li>
    <li>Jane Smith</li>
</ul>

Wee.$not('.names li', function(i, el) {
    // Check if data-hidden is set to truereturn Wee.$data(el, 'hidden') === true;
});

[<li>John Doe</li>, <li>John Smith</li>, <li>Jane Smith</li>]

# $offset

Get the offset position of a matching selection relative to the document

# Set

Wee.$offset('ref:element', {
    top: 100,
    left: 20
});

# Get

Wee.$offset('ref:element');

{
    top: 520,
    left: 30
}

The object values are returned as unitless pixel values.

# $parent

Get unique parent from each matching selection

# Selection Parent

Wee.$parent('ref:element');

# Filtered

Return selection parent only if it matches the filter.

Wee.$parent('ref:element', 'main');

# $parents

Get unique ancestors of each matching selection

Wee.$parents('ref:element');

# $position

Get the position of the first matching selection relative to its offset parent

Wee.$position('ref:element');

{
    top: 250,
    left: 30
}

The object values are returned as unitless pixel values.

# $prepend

Prepend selection or markup before each matching selection

# Selection

Wee.$prepend('ref:element', Wee.$('.js-element'));

# Function

The current index and HTML are injected into the callback. The scope of this is the element.

<h1 data-ref="listHeading">Names</h1>
<ul data-ref="list">
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>

Wee.$prepend('ref:listHeading', function() {
    return Wee.$children('ref:list').length + ' ';
});

(<h1 data-ref="listHeading">2 Names</h1><ul data-ref="list"><li>John Doe</li><li>Jane Doe</li></ul>)

# $prev

Get the unique previous sibling of each matching selection

# Simple

Wee.$prev();

# Filtered

<ul>
    <li>John Doe</li>
    <li>John Smith</li>
    <li data-ref="name">Jane Doe</li>
    <li>Jane Smith</li>
</ul>

Wee.$prev('ref:name');

<li>John Smith</li>

# $prop

Get property of first matching selection or set property of each matching selection

# Get

Wee.$prop('ref:element', 'checked');

true

# Single

Wee.$prop('ref:element', 'checked', true);

# Multiple

Wee.$prop('ref:element', {
    checked: true,
    required: false
});

# $remove

Remove each matching selection from the document

Wee.$remove('ref:element');

# $removeAttr

Remove specified attribute of each matching selection

Wee.$removeAttr('ref:element', 'title');

# $removeClass

Remove classes from each matching selection

# Single

Wee.$removeClass('ref:element', 'modifier');

# Multiple

Separate multiple class names with spaces.

Wee.$removeClass('ref:element', 'modifier modifier2');

# Function

The current index and class value are injected into the callback. The scope of this is the element.

Wee.$removeClass('ref:element', function(i, className) {
    // Remove an indexed classreturn className + i;
});

# $replaceWith

Replace each matching selection with selection or markup

# Selection

Wee.$replaceWith('ref:element', Wee.$('.js-element'));

# Markup

Wee.$replaceWith('ref:element', '<span>Replacement element</span>');

# Function

The current index and HTML are injected into the callback. The scope of this is the element.

<ul class="names">
    <li>John Doe</li>
    <li>Jane Doe</li>
</ul>

Wee.$replaceWith('.names li', function(i, html) {
    return"<li>The " + html + "</li>";
});

<ul class="names">
    <li>The Jane Doe</li>
    <li>The John Doe</li>
</ul>

# $scrollLeft

Get or set the X scroll position of each matching selection

# Get Value

Wee.$scrollLeft();

0

The value returned is a unitless pixel value.

# Set Value

Wee.$scrollLeft(15);

Scroll position should be provided as unitless pixel value.

# $scrollTop

Get or set the Y scroll position of each matching selection

Wee.$scrollTop();

1560

The value returned is a unitless pixel value.

# Set Value

Wee.$scrollTop('body', 15);

Scroll position should be provided as unitless pixel value.

# $serializeForm

Serialize input values from first matching form selection

# Standard

Wee.$serializeForm('ref:element');

"inputName=value&inputName2=value2"

# JSON

Wee.$serializeForm('ref:element', true);

{
    "inputName": "value",
    "inputName2": "value2"
}

# $show

Show each matching selection

Show works by removing the js-hide class either set manually or through Wee.$hide().

Wee.$show('ref:element');

# $siblings

Get unique siblings of each matching selection

<p>Sibling paragraph</p>
<span>Sibling span</span>
<div data-ref="sibling">Target div.</div>

# All Siblings

Without a filter all siblings will be returned.

Wee.$siblings('ref:sibling');

[<p>Sibling paragraph</p>, <span>Sibling span</span>]

# Filtered

Wee.$siblings('ref:sibling', 'p');

[<p>Sibling paragraph</p>]

# $slice

Get subset of selection matches from specified range

Wee.$slice('li', 0, 3);

# $text

Get inner text of first selection or set each matching selection's text

<div class="js-element">Inner text</div>

# Get

Wee.$text('.js-element');

"Inner text"

# Set

Wee.$text('.js-element', 'New text');

# Function

The current index and text are injected into the callback. The scope of this is the element.

Wee.$text('.js-element', function(el, i, text) {
    // Return uppercase textreturn text.toUpperCase();
});

# $toggle

Toggle the display of each matching selection

Rotates calling the hide and show methods.

Wee.$toggle('ref:element');

# $toggleClass

Toggle adding and removing class(es) from the specified element

# Single

Wee.$toggleClass('ref:element', 'modifier');

# Multiple

Separate multiple class names with spaces.

Wee.$toggleClass('ref:element', 'modifier modifier2');

# Function

The current index, class value and state are injected into the callback. The scope of this is the element.

Wee.$toggleClass('.element', function(i, className, state) {
    // Return the class intended for togglereturn className + (state === true ? '-on' : '-off');
});

# $val

Get value of first matching selection or set values of each matching selection

# Get

Wee.$val('ref:element');

# Set

Wee.$val('ref:element', '123');

# Function

<input type="text" value="This is an ordinary sentence in an input field." data-ref="input">

Wee.$val('ref:input', function(i, value) {
    // Check the length of the current value but don't change the valueif (value.length > 20) {
        alert('Getting long winded, aren\'t we?');
    }

    return value;
});

# $width

Get or set the width of each matching selection

# Get

Wee.$width('ref:element');

100

The value returned is a unitless pixel value.

# Set

Wee.$width('ref:element', '10rem');

# Function

The current index and width are injected into the callback. The scope of this is the element.

<div data-ref="example"style="width: 100px;"></div>

Wee.$width('ref:example', function(i, width) {
    // Increase the width of the element by 50pxreturn (width += 50) + 'px';
});

If no unit is provided pixels will be set.

# $wrap

Wrap markup around each matching selection

# Markup

Wee.$wrap('ref:element', '<div class="wrapper"></div>');

# Function

The current index is injected into the callback. The scope of this is the element.

<div class="library">
    <ul class="books programming">
        <li>JavaScript: The Definitive Guide</li>
        <li>Mastering Regular Expressions</li>
    </ul>
    <ul class="books technique">
        <li>Code Complete</li>
        <li>The Pragmatic Programmer</li>
    </ul>
</div>

Wee.$wrap('.books', function(i) {
    if (Wee.$hasClass($(this), 'programming')) {
        return'<div class="reference"></div>'
    } else {
        return'<div class="readers"></div>'
    }
});

<div class="library">
    <div class="reference">
        <ul class="books programming">
            <li>JavaScript: The Definitive Guide</li>
            <li>Mastering Regular Expressions</li>
        </ul>
    </div>
    <div class="readers">
        <ul class="books technique">
            <li>Code Complete</li>
            <li>The Pragmatic Programmer</li>
        </ul>
    </div>
</div>

# $wrapInner

Wrap markup around the content of each matching selection

# Markup

Wee.$wrapInner('ref:element', '<div class="wrapper"></div>');

# Function

The current index is injected into the callback. The scope of this is the element.

<ul class="names">
    <li class="boss">Jane Doe</li>
    <li>John Doe</li><
/ul>

Wee.$wrapInner('.names li', function(i) {
    // Wrap bosses in bold tagif (Wee.$hasClass($(this), 'boss')) {
        return'<b></b>';
    }
});

<ul class="names">
    <li class="boss"><b>Jane Doe</b></li>
    <li>John Doe</li>
</ul>