Finding and Filtering | Ucode

Appearance

On this page

Finding and Filtering ​

Typically, selectors can directly locate the elements we want, but once we have a jQuery object, we can also search and filter based on that object.

The most common search is to find all child nodes of a particular node using the find() method, which accepts any selector. For example, given the following HTML structure:

html
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>

To use find():

javascript
let ul = $('ul.lang'); // Get <ul>
let dy = ul.find('.dy'); // Get JavaScript, Python, Scheme
let swf = ul.find('#swift'); // Get Swift
let hsk = ul.find('[name=haskell]'); // Get Haskell

To search upwards from the current node, use the parent() method:

javascript
let swf = $('#swift'); // Get Swift
let parent = swf.parent(); // Get the parent node <ul> of Swift
let a = swf.parent('.red'); // Get the parent node <ul> while applying a filter condition. If <ul> doesn't match, returns an empty jQuery object.

To access sibling nodes at the same level, use next() and prev() methods. For example, after obtaining the Swift node:

javascript
let swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // Empty jQuery object because the next element Scheme doesn't match the condition [name=haskell]

swift.prev(); // Python
swift.prev('.dy'); // Python, because Python also matches the filter condition .dy

Filtering ​

Similar to the map and filter functions in functional programming, jQuery objects have analogous methods.

The filter() method can remove nodes that do not match the selector condition:

javascript
let langs = $('ul.lang li'); // Get JavaScript, Python, Swift, Scheme, and Haskell
let a = langs.filter('.dy'); // Get JavaScript, Python, Scheme

You can also pass a function to filter(). Note that the this inside the function refers to the DOM object, not the jQuery object:

javascript
let langs = $('ul.lang li'); // Get JavaScript, Python, Swift, Scheme, and Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // Returns nodes that start with S
}); // Get Swift, Scheme

The map() method converts the DOM nodes in a jQuery object into other objects:

javascript
let langs = $('ul.lang li'); // Get JavaScript, Python, Swift, Scheme, and Haskell
let arr = langs.map(function () {
    return this.innerHTML;
}).get(); // Use get() to retrieve an array of strings: ['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

Additionally, if a jQuery object contains multiple DOM nodes, the first(), last(), and slice() methods can return a new jQuery object, omitting unnecessary nodes:

javascript
let langs = $('ul.lang li'); // Get JavaScript, Python, Swift, Scheme, and Haskell
let js = langs.first(); // JavaScript, equivalent to $('ul.lang li:first-child')
let haskell = langs.last(); // Haskell, equivalent to $('ul.lang li:last-child')
let sub = langs.slice(2, 4); // Swift, Scheme, parameters are similar to the array's slice() method

Practice ​

For the following form:

html
<form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="CD">Chengdu</option>
        <option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>

After entering values, use jQuery to retrieve the JSON string of the form, where the keys and values correspond to each input's name and its respective value, for example: {"name":"Michael","email":...}

javascript
let json = ???;

// Display result:
if (typeof(json) === 'string') {
    console.log(json);
}
else {
    console.log('json variable is not a string!');
}