jQuery — Filtering

filter()

$("li").filter(".active");
$("li").filter(function(index, element) {
    return $(element).text().length > 5;
});

not()

$("li").not(".inactive");
$("li").not(":first");

first(), last(), eq()

$("li").first();
$("li").last();
$("li").eq(2); // Third element (0-indexed)

has()

$("div").has("p");
$("div").has("img.highlight");

is()

if ($("li").first().is(".active")) {
    console.log("Active");
}

slice()

$("li").slice(1, 4);    // Elements 1, 2, 3
$("li").slice(2);       // Elements from index 2

each()

$("li").each(function(index) {
    $(this).addClass("item-" + index);
});

map()

var urls = $("a").map(function() {
    return $(this).attr("href");
}).get();

Practical: Filtering List

$("#search").on("keyup", function() {
    var term = $(this).val().toLowerCase();
    $("ul li").each(function() {
        var match = $(this).text().toLowerCase().indexOf(term) > -1;
        $(this).toggle(match);
    });
});

Mini Practice

1. Filter elements by class
2. Use a custom filter function
3. Slice a list to show items 2-4
4. Build a search filter

Up Next

Continue with AJAX — loading data from the server.