query-relative 
Relative query, an enhanced query—a handy replacement for querySelector.
Provides relative pseudos:
:parent,:closest,:nextand:prev.Fixes immediate children selector
> *, which is unavailable in query.Returns
Arrayinstead ofNodeListin multiple query, so you can doforEachon result.Polyfills
:scopepseudo.Provides standalone
closest,parent,prevandnextviarequire('query-relative/<pseudo>').Accepts other elements as a selector, for example, to find within a set.
Fully compliant with query.
Install
Use browserify, duo, component or alike to use query-relative.
$ npm install query-relative
var query = require('query-relative');
//or require selectively
var closest = require('query-relative/closest');Use
var q = require('query-relative');
//disable active item
q(':closest(.item):parent > .active', linkElement).classList.remove('active');
//enable current item
q(':closest(.item)', linkElement).classList.add('active');
//disable interactions
q(':root .container', linkElement).classList.add('no-interactions');
//select item within children (unable with querySelector)
q('> .active', container);
//inline svg images
var inject = require('svg-inject');
q.all('img[src$=".svg"]').forEach(inject);API
query(selector, [el]);
query.all(selector, [el]);
closest( el [, selector|element], checkSelf, within );
next( el [, selector|element] );
prev( el [, selector|element] );| Parameter | Type | Default | Description |
|---|---|---|---|
el |
Node, NodeList, Array, window or nothing. | document |
An element or list of elements to perform query on. If omitted — document is used. |
selector |
string | Regular CSS selector with possible additional pseudos: :prev, :next, :parent, :closest(selector?), :root. |
|
element |
Node | An element to match in looking up. | |
multiple |
bool | false |
Return list of elements instead of a single element. |
