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>
<html>
<head>
    <title>each demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            font-size: 18px;
            margin: 0;
        }

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

        .example {
            font-style: italic;
        }
    </style>
</head>
<body>

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

<script>
    $('span').click(function () {
        $('li').each(function () {
            $(this).toggleClass('example');
        });
    });
</script>

</body>
</html>

Submit Video

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

jQuery: not

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

For not method, the supplied selector is tested against each element; the elements that don’t match the selector will be included in the result.

<!doctype html>
<html>
<head>
    <title>not demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            background: yellow;
            border: 2px solid white;
        }

        .green {
            background: #8f8;
        }

        .gray {
            background: #ccc;
        }

        #blueone {
            background: #99f;
        }
    </style>
</head>
<body>

<div></div>
<div id='blueone'></div>
<div></div>
<div class='green'></div>
<div class='green'></div>
<div class='gray'></div>
<div></div>

<script>
    $('div').not('.green, #blueone')
            .css('border-color', 'red');
</script>

</body>
</html>

Post Your Gameplays

In this example, class=’green’ and id=’blueone’ will be excluded when applying the .css method.

jQuery: siblings

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

The siblings method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

<!doctype html>
<html>
<head>
    <title>eq demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        li {
            background: yellow;
        }

        .silver {
            background: silver;
        }
    </style>
</head>
<body>

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class='third-item'>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

<script>
    $('li.third-item').siblings().addClass('silver');
</script>

</body>
</html>

YOUR TEXT

Notice that list items 1, 2, 4 and 5 are selected but not list item 3.

jQuery: .filter()

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

.filter() reduces the set of matched elements to those that match the selector or pass the function’s test.

<!doctype html>
<html>
<head>
    <title>eq demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        li {
            background: yellow;
        }

        .blue {
            background: blue;
        }
    </style>
</head>
<body>

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
</ul>

<script>
    $('li').filter(':even').addClass('blue');
</script>

</body>
</html>

Try The Code

There are 6 list items in the list and we have used :even selector to select the even number list.