jQuery Filtering
Use filter, not, is and eq for distinct collection questions instead of hiding logic inside a fragile selector.
How it works
filter retains matching members, not excludes them, is asks whether any member matches and eq selects an index from the current collection. The example filters by a data attribute using a predicate, then reports another exclusion and a boolean test. JavaScript array-like positions are zero-based here. Positional filtering describes the current collection order and should not become a permanent identity for a record that can move.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Reduce a Collection With an Explicit Rule</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<ul id="shelf">
<li data-kind="walks">River Paths</li>
<li data-kind="garden">Small Gardens</li>
<li data-kind="stories">Evening Stories</li>
</ul>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
const $rows = $('#shelf li');
const $garden = $rows.filter(function () {
return $(this).attr('data-kind') === 'garden';
});
$garden.addClass('chosen');
$('output').text(
$rows.not($garden).length +
' alternatives; first is walks: ' +
$rows.eq(0).is('[data-kind="walks"]'),
);
});
</script>
</body>
</html>
Expected result
One garden row is highlighted and the output reports two alternatives and a true test.
A predicate can express a rule clearly without concatenating a selector from external values. eq(-1) can read from the end, but that convenience does not solve record identity. Browser filters such as checked or visible describe current presentation/control state, not permission to perform a business action. Keep those meanings separate in a real feature.
Use jQuery’s official API documentation for exact method and return contracts.