select()

Selects an item or a collection of items.

---

The method accepts a single argument in the following forms:

• HTMLElement

• HTMLCollection

• NodeList

• Number - the index of the selectable item in the items array

• Object - a reference to the item stored in the items array

• Array - an array of HTMLElement, indexes or item references

Selecting single items

Markup

<ul id="list">
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
    <li class="ul-selectable"></li>
</ul>

JS

Selecting multiple items

Markup

<ul id="list">
    <li class="ul-selectable">1</li>
    <li class="ul-selectable alt">2</li>
    <li class="ul-selectable">3</li>
    <li class="ul-selectable alt">4</li>
    <li class="ul-selectable">5</li>
    <li class="ul-selectable alt">6</li>
    <li class="ul-selectable">7</li>
    <li class="ul-selectable alt">8</li>
</ul>

JS

Using indexes

NOTE: If selecting an item via an index, you must pass the index as the node would appear in the collection of selectable items, NOT the element's position relative to it's sibling elements.

<ul>
    <li class="ul-selectable">1</li> // index 0
    </li></li>
    </li></li>
    <li class="ul-selectable">2</li> // index 1
    <li class="ul-selectable">3</li> // index 2
    <li class="ul-selectable">4</li> // index 3
    </li></li>
    <li class="ul-selectable">5</li> // index 4
</ul>

Select the first, second and third items

// incorrect
selectable.select([0,3,4]);

// correct
selectable.select([0,1,2]);