jQuery: .each()

This entry is part 32 of 33 in the series jQuery Tutorial

The .each(function()) will iterate over a jQuery object, executing a function for each matched element.

Each time the callback or function runs, it is passed the current loop iteration, beginning from 0.

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

<!doctype html>
    <title>each demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        ul {
            font-size: 18px;
            margin: 0;

        span {
            color: blue;
            text-decoration: underline;
            cursor: pointer;

        .example {
            font-style: italic;

To do list: <span>(click here to change)</span>
    <li>Be merry</li>

    $('span').click(function () {
        $('li').each(function () {


In this case, this is referred to the li element.

Series Navigation<< jQuery: not
jQuery: A simple slider >>