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

// create a new fUtil instance

// get the number of matching elements (returns int)

// add CSS class

// remove CSS class

// has CSS class

// check for a match (returns bool)

// check for a match

// get first matching element

// get last matching element

// get previous matching element

// get next matching element

// prepends selected element(s) with a value

// appends selected element(s) with a value

// get selected element(s) parents

// get selected element(s) closest parents

// remove current element(s)

// 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

// set text value

// set input value

// get all matching DOM nodes (returns array of DOM nodes)

// get first matching DOM node (returns DOM node)

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

// check if a value or variable exists

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

Usage examples

Do something on document ready:

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

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


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