jQuery: .each()

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

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

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()

.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.

jQuery: .eq()

The .eq() method reduces the set of matched elements to the one at the specified index.

The supplied index identifies the position of this element in the set.

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

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
    $('body').find('div').eq(2).addClass('blue');
</script>

</body>
</html>

Try The Code

In the example above, the supplied index is 2.