children ()
Gets the the immediate child elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui(".flex-row").children();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm example">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm example">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui(".flex-row").children(".example");
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").closest(".flex-row");
});
elements (query)
Returns all HTML elements in the set of matched elements as a plain array.
Returns - Array.
Argument
Type
Description
query
String
A valid CSS selector expression.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" name="selectable">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" name="selectable">Element 2</div>
</div>
</div>
webui.ready(function() {
var array = ui(".flex-row div").select("[name=selectable]").elements();
});
eq (index)
Gets the element at the specified index in the set of matched elements.
Returns - WebUI object.
index
number
The index of the element in a the set of matched elements.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#exampleArea .flex-row div").eq(1);
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm"></div>
<div class="width-md height-sm"></div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#exampleArea").find(".flex-row > div");
});
first ()
Gets the first element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">First</div>
<div class="width-md height-sm">Last</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#exampleArea .flex-row div").first();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var hasWidth = ui(".area").has(".width-md");
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var isDiv = ui(".area .flex-row").children().is("div");
});
last ()
Gets the last element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">First</div>
<div class="width-md height-sm">Last</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#exampleArea .flex-row div").last();
});
nextSibling ()
Gets the immediate sibling element after each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").nextSibling();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm example">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm example">Element 3</div>
<div class="width-md height-sm">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").nextSibling(".example");
});
nextSiblings ()
Gets the all sibling elements after each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm">Element 3</div>
<div class="width-md height-sm">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").nextSiblings();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm example">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm">Element 3</div>
<div class="width-md height-sm example">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").nextSiblings(".example");
});
parent ()
Gets the immediate parent element of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").parent();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").parent("div");
});
parents ()
Gets the all parent elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").parents();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").parents("div");
});
prevSibling ()
Gets the immediate sibling element before each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").prevSibling();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm example">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm example">Element 3</div>
<div class="width-md height-sm">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").prevSibling(".example");
});
prevSiblings ()
Gets the all sibling elements before each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm">Element 3</div>
<div class="width-md height-sm">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").prevSiblings();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm example">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" id="element2">Element 2</div>
<div class="width-md height-sm">Element 3</div>
<div class="width-md height-sm example">Element 4</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element2").prevSiblings(".example");
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm" name="selectable">Element 0</div>
<div class="width-md height-sm">Element 1</div>
<div class="width-md height-sm" name="selectable">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui(".flex-row div").select("[name=selectable]");
});
siblings ()
Gets all sibling elements for each element in the set of matched elements.
Returns - WebUI object.
<div class="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").siblings();
});
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="area" id="exampleArea">
<div class="flex-row gap-horizontal-sm">
<div class="width-md height-sm">Element 0</div>
<div class="width-md height-sm" id="element1">Element 1</div>
<div class="width-md height-sm">Element 2</div>
</div>
</div>
webui.ready(function() {
var matchedElements = ui("#element1").siblings("div");
});
