# Chain

Wee allows many methods to be chained to selectors by omitting the first argument of the method. This often makes code more readable and permits multiple methods to be executed on the same selection.

# Animate

$(sel).tween(values, options)

In this example, the target is faded out to full transparency.

$('ref:element').tween({
    opacity: 0
}, {
    duration: 600
});

# Core

• $(sel, context)
• $(sel).each(fn, options)
• $(sel).map(fn, options)
• $(sel).setRef()
• $(sel).setVar()

# Reverse

The reverse method simply reverses the order of the selection results.

$('.element').reverse();

# toArray

Convert a Wee selection to a simple array

$('.element').toArray();

# DOM

• $(sel).addClass(value)
• $(sel).after(source, remove)
• $(sel).append(source)
• $(sel).appendTo(target)
• $(sel).attr(a, b)
• $(sel).before(source, remove)
• $(sel).children(filter)
• $(sel).clone()
• $(sel).closest(filter, context)
• $(sel).contains(descendant)
• $(sel).contents()
• $(sel).css(a, b)
• $(sel).data(a, b)
• $(sel).empty()
• $(sel).eq(index, context)
• $(sel).filter(filter, options)
• $(sel).find(filter)
• $(sel).first()
• $(sel).get(index)
• $(sel).hasClass(className)
• $(sel).height(value)
• $(sel).hide()
• $(sel).html(value)
• $(sel).index()
• $(sel).insertAfter(target)
• $(sel).insertBefore(target)
• $(sel).is(filter, options)
• $(sel).last(context)
• $(sel).next(filter, options)
• $(sel).not(filter, options)
• $(sel).offset(value)
• $(sel).parent(filter)
• $(sel).parents(filter)
• $(sel).position()
• $(sel).prepend(source)
• $(sel).prependTo(target)
• $(sel).prev(filter, options)
• $(sel).prop(a, b)
• $(sel).remove(context)
• $(sel).removeAttr(name)
• $(sel).removeClass(value)
• $(sel).replaceWith(source)
• $(sel).scrollLeft(value)
• $(sel).scrollTop(value)
• $(sel).serialize(json)
• $(sel).show()
• $(sel).siblings(filter)
• $(sel).slice(start, end)
• $(sel).text(value)
• $(sel).toggle()
• $(sel).toggleClass(className, state)
• $(sel).val(value)
• $(sel).width(value)
• $(sel).wrap(html)
• $(sel).wrapInner(html)

# Add

You can join selections using the add method.

$('.element').add('ref:selection').hide();

# Example

DOM traversal is made easy with chaining.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

$('li').eq(1).text();

# Events

• $(sel).on(a, b, c)
• $(sel).off(a, b)
• $(sel).bound(event, fn)
• $(sel).trigger(name)

In this example, the selector is the element to which the event is bound.

$('.element').on('click', function() {
    // Click logic
});

Here the event is being triggered on the selector.

$('.element').trigger('click');

# Register

To register a new chainable method follow the pattern below.

Wee.$chain('setId', function(id) {
    this.attr('id', id);

    returnthis;
});

Alternatively you can register methods in a jQuery-compatible syntax.

$.fn.setId = function(id) {
    this.data('id', id);

    returnthis;
};

To execute the method use the following.

$('.element').setId(3).show();

Be sure to return this at the end of your method if the function’s purpose is not to return another value. This ensures the chain can continue.

# Shortcuts

All the core and DOM methods prefixed with $ are shortcut when chaining is enabled. Just remove the method’s dollar sign and replace Wee with $.

# Examples

$.unique([1, 2, 2, 3]);
$.get('key');
$.height('ref:element');

# View

• $(sel).render(data)

The view chain method updated the content of a DOM element given a data object.

<div class="element">
    <span class="{{ className }}">{{ content }}</span>
</div>

$('.element').render({
    className: 'dynamic-class',
    content: 'Span contents'
});