fUtil is a small JavaScript helper library that comes built-in with FacetWP.

It is similar to jQuery, with the difference that fUtil relies entirely on modern, vanilla JavaScript.

fUtil can be used as a lightweight substitute on websites that don’t need or load jQuery. FacetWP itself does not need jQuery to function, and you can disable loading it in FacetWP’s settings.

fUtil methods

 * fUtil library
 * 
 * Unless stated, methods return the fUtil instance
 */

// document.ready handler
$(function() { ... })

// select the document
$()

// get an element
$(selector)

// create a new fUtil instance
$(selector).clone()

// get the number of matching elements (returns int)
$(selector).len()

// add CSS class
$(selector).addClass(val)

// remove CSS class
$(selector).removeClass(val)

// has CSS class
$(selector).hasClass(val)

// check for a match (returns bool)
$(selector).is(selector)

// check for a match
$(selector).find(selector)

// get first matching element
$(selector).first()

// get last matching element
$(selector).last()

// get previous matching element
$(selector).prev(selector)

// get next matching element
$(selector).next(selector)

// prepends selected element(s) with a value
$(selector).prepend(val)

// appends selected element(s) with a value
$(selector).append(val)

// get selected element(s) parents
$(selector).parents(selector)

// get selected element(s) closest parents
$(selector).closest(selector)

// remove current element(s)
$(selector).remove()

// adds event listener
$(selector).on('action', callback)

// removes event listener
$(selector).off('action', callback)

// trigger an event
$(selector).trigger('action', callback, extraData)

// set an attribute
$(selector).attr(name, val)

// set data values
$(selector).data(key, val)

// set HTML
$(selector).html(val)

// set text value
$(selector).text(val)

// set input value
$(selector).val(val)

// get all matching DOM nodes (returns array of DOM nodes)
$(selector).nodes

// get first matching DOM node (returns DOM node)
$selector).nodes[0]

// make an ajax POST
$.post(url, data, settings)

// check if a value or variable exists
$.isset(var)

// loop through an iterable
$.each(items, callback)

Usage examples

Do something on document ready:

(function($) {
    $(function() {
        console.log('document ready');
    });
})(fUtil);

Remove the is-loading class from all “facet-wrap” elements:

$('.facet-wrap').removeClass('is-loading');

Prepend “Name: ” to all elements with class “the-name”:

$('.the-name').prepend('Name: ');

Loop through text inputs (class my-input) and, if empty, remove the closest .item parent:

$('.my-input').each(function() {
    if ('' == $(this).val()) {
        $(this).closest('.item').remove(); // adios!
    }
});

See also