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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to add or callback

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 class
    return 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback, or HTML string

remove

boolean

false

Remove target after insertion

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 element
    return '<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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

Source selection, callback, or HTML string

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 names
    return ' (' + 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Attribute to get or set or an object

b

function, string

-

Value to assign to attribute

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback or HTML string

remove

boolean

false

Remove target after insertion

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

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

filter

selection

-

Filter 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

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

$closest

Get unique closest ancestors of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

context

selection

-

Context 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.

$contains

Determine if any matching parent selection contains descendant selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

descendant

selection

-

Descendant selection

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

$contents

Get unique content of each matching selection

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Property to get or set or an object

b

string

-

Value to assign to property

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Data attribute to get or set or an object

b

string

-

Value to assign to data attribute

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

index

number

-

Element index

context

selection

-

Context 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

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

VariableTypeDefaultDescriptionRequired

parent

selection

-

Parent selection

filter

selection

-

Filter selection

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

$first

Get the first element of a matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Selection context

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

className

string

-

Specific class name

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string, number, boolean

-

Height to set, callback, or true to get outer height

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 50px
    return (height += 50) + 'px';
});

If no unit is provided pixels will be set.

$hide

Hide each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

HTML to set or callback

<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 HTML
    return html.toUpperCase();
});

$index

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

<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

VariableTypeDefaultDescriptionRequired

source

selection

-

Source selection

target

selection

-

Target selection

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

$insertBefore

Insert each matching source selection element before each matching target selection

VariableTypeDefaultDescriptionRequired

source

selection

-

Source selection

target

selection

-

Target selection

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

$is

Determine if at least one matching selection matches a specified criteria

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

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 true
    return Wee.$data(el, 'hidden') === 'true';
});
true

$last

Get the last element of a matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Context 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

options

object

-

Callback options

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

function, selection

-

Filter selection or callback

options

object

-

Callback options

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 true
    return 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

object

-

Offset values

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

VariableTypeDefaultDescriptionRequired

child

selection

-

Child selection

filter

selection

-

Filter 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

VariableTypeDefaultDescriptionRequired

child

selection

-

Child selection

filter

selection

-

Filter selection

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

$position

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

-

Source selection, callback, or HTML string

options

object

-

Callback options

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter selection

options

object

-

Callback options

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

a

string, object

-

Property to get or set or an object

b

function, string

-

Value to assign to property

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

context

selection

-

Context selection

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

$removeAttr

Remove specified attribute of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

name

string

-

Attribute name

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

$removeClass

Remove classes from each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to remove or callback

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 class
    return className + i;
});

$replaceWith

Replace each matching selection with selection or markup

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

source

function, selection, string

Source selection, callback, or HTML string

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

VariableTypeDefaultDescriptionRequired

target

selection

window

Target Selection

value

integer

-

Left position

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

VariableTypeDefaultDescriptionRequired

target

selection

window

Target selection

value

integer

-

Top position

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

VariableTypeDefaultDescriptionRequired

select

selection

-

Target selection

json

boolean

false

Convert to JSON

Standard

Wee.$serializeForm('ref:element');
"inputName=value&inputName2=value2"

JSON

Wee.$serializeForm('ref:element', true);
{
    "inputName": "value",
    "inputName2": "value2"
}

$show

Show each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

filter

selection

-

Filter 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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

start

integer

-

Starting index

end

integer

-

Ending index

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

$text

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Text to set or callback

<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 text
    return text.toUpperCase();
});

$toggle

Toggle the display of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

Rotates calling the hide and show methods.

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

$toggleClass

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

className

function, string

-

Class name(s) or callback

state

boolean

-

Force add or remove

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 toggle
    return className + (state === true ? '-on' : '-off');
});

$val

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

-

Class name(s) to add or callback

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 value
    if (value.length > 20) {
        alert('Getting long winded, aren\'t we?');
    }

    return value;
});

$width

Get or set the width of each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

value

function, string

Width to set or callback

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 50px
    return (width += 50) + 'px';
});

If no unit is provided pixels will be set.

$wrap

Wrap markup around each matching selection

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

html

function, string

-

Wrapper HTML or callback

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

VariableTypeDefaultDescriptionRequired

target

selection

-

Target selection

html

function, string

-

Wrapper HTML or callback

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 tag
    if (Wee.$hasClass($(this), 'boss')) {
        return '<b></b>';
    }
});
<ul class="names">
    <li class="boss"><b>Jane Doe</b></li>
    <li>John Doe</li>
</ul>