children ()
Gets the immediate child elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild").children();
});
JS
children (query)
Gets the immediate child elements matching the query selector expression of each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild").children("#element1");
});
JS
closest (query)
Gets the closest element matching the query selector expression starting from each element in the set of matched elements. If any element in the set of matched elements matches the selector expression, then they will be returned, otherwise the closest parent element matching the selector expression will be returned.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").closest(".container");
});
JS
element ()
Returns a single HTML element from the WebUI object. If the WebUI onject contains no elements or more than one element, then undefined is returned.
Returns - HTMLElement.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let element = ui("#element1").element();
});
JS
elements ()
Returns all HTML elements in the set of matched elements as a JavaScript array.
Returns - Array.
Argument
Type
Description
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let elementArray = ui("#containerChild div").elements();
});
JS
eq (index)
Gets the element at the specified index in the set of matched elements.
Returns - WebUI object.
index
integer
The index of the element in a the set of matched elements.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild div").eq(1);
});
JS
find (query)
Finds any child elements matching the query selector expression for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#exampleContainer").find("#containerChild > div");
});
JS
first ()
Gets the first element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild div").first();
});
JS
has (query)
Determines whether any of the elements descendants within the set of matched elements matches the specified query selector expression.
Returns - Boolean.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let hasBorder = ui("#containerChild").has("[class*='border']");
});
JS
is (query)
Determines whether any element within the set of matched elements matches the specified query selector expression.
Returns - Boolean.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let isDiv = ui("#containerChild").children().is("div");
});
JS
last ()
Gets the last element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild div").last();
});
JS
nextSibling ()
Gets the immediate sibling element after each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element0").nextSibling();
});
JS
nextSibling (query)
Gets the immediate sibling element matching the query selector expression after each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element0").nextSibling("div");
});
JS
nextSiblings ()
Gets the all sibling elements after each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element0").nextSiblings();
});
JS
nextSiblings (query)
Gets the all sibling elements matching the query selector expression after each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element0").nextSiblings("div");
});
JS
parent ()
Gets the immediate parent element of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").parent();
});
JS
parent (query)
Gets the immediate parent element matching the query selector expression of each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").parent("div");
});
JS
parents ()
Gets the all parent elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").parents();
});
JS
parents (query)
Gets the all parent elements matching the query selector expression of each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").parents("div");
});
JS
prevSibling ()
Gets the immediate sibling element before each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element2").prevSibling();
});
JS
prevSibling (query)
Gets the immediate sibling element matching the query selector expression before each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element2").prevSibling("div");
});
JS
prevSiblings ()
Gets the all sibling elements before each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element2").prevSiblings();
});
JS
prevSiblings (query)
Gets the all sibling elements matching the query selector expression before each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>/pre>
HTML
webui.ready( () => {
let matchedElements = ui("#element2").prevSiblings("div");
});
JS
select (query)
Selects all elements matching the query selector expression within each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#containerChild div").select("#element1");
});
JS
siblings ()
Gets all sibling elements for each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").siblings();
});
JS
siblings (query)
Gets all sibling elements matching the query selector expression for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let matchedElements = ui("#element1").siblings("div");
});
JS