jQuery Attribute Ends With [name$="value"]

What You’ll Learn

The attribute ends-with selector — written [name$="value"] — matches elements whose attribute value ends with your search string. Matching is case-sensitive. It is ideal for file extensions, ID suffixes, and naming conventions — available since jQuery 1.0.

Introduction

Many real-world naming patterns use suffixes: file extensions (.pdf, .min.js), field names (billing_email), and error-state IDs (username-error). The ends-with attribute selector lets you target those elements without listing every full name.

The dollar-equals syntax [attribute$="value"] checks whether the attribute string ends with your suffix — nothing may follow it. jQuery has supported this selector since version 1.0, and browsers implement it natively through CSS3 attribute selectors.

Understanding the Ends-With Selector

Think of the attribute value as text on a line. The selector asks: “Do the last characters exactly equal my suffix?” If yes, the element matches.

• name="newsletter" + [name$="letter"] → matches (ends with letter).
• name="letter" + [name$="letter"] → matches (entire value is the suffix).
• name="letterbox" + [name$="letter"] → no match (ends with box).
• href="/docs/guide.pdf" + [href$=".pdf"] → matches.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute$='value']" )
// shorthand:
$( "[attribute$='value']" )

// common patterns:
$( "input[name$='letter']" )
$( "a[href$='.pdf']" )

Parameters

• attribute — the HTML attribute name (name, href, id, etc.).
• value — suffix string the attribute value must end with (case-sensitive).

Return value

• A jQuery object containing every element whose attribute ends with the suffix.
• Empty collection when no values match.

Official jQuery API example

$( "input[name$='letter']" ).val( "a letter" );

// Matches name="newsletter", name="loveletter", name="letter"
// Does NOT match name="letterbox" or name="letters"

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover suffix rules, operator comparison, PDF links, and scoped form fields. Use the Try-it links to run each snippet.

$( "input[name$='letter']" ).val( "a letter" );

// Matches: newsletter, loveletter, letter
// Skips: letterbox, letters, username

newsletter, loveletter, letter → value "a letter"
letterbox, letters, username → unchanged

var names = [ "newsletter", "letter", "letterbox", "letters", "loveletter" ];

names.forEach( function( n ) {
  var $el = $( "<input>" ).attr( "name", n ).appendTo( "body" );
  console.log( n, "→", $el.is( "[name$='letter']" ) ? "MATCH" : "no" );
  $el.remove();
});

newsletter → MATCH
letter → MATCH
letterbox → no
letters → no
loveletter → MATCH

var path = "/assets/report.pdf";
var $a = $( "<a>" ).attr( "href", path ).appendTo( "body" );

console.log( "href:", path );
console.log( "$=.pdf:", $a.is( "[href$='.pdf']" ) );
console.log( "^=/assets:", $a.is( "[href^='/assets']" ) );
console.log( "*=report:", $a.is( "[href*='report']" ) );

$a.remove();

href: /assets/report.pdf
$=.pdf: true
^=/assets: true
*=report: true

Each operator checks a different part of the same string

$( "a[href$='.pdf']" ).addClass( "pdf-link" );

// Matches /docs/guide.pdf and /files/annual-report.pdf
// Does not match /pdf-index or links without .pdf suffix

PDF download links → class "pdf-link"
HTML page links → unchanged

$( "#form input[name$='_confirm']" ).addClass( "confirm-field" );

// Matches email_confirm, password_confirm inside #form
// Ignores same names in other forms on the page

email_confirm, password_confirm in #form → class "confirm-field"
Same suffix fields outside #form → not styled

🚀 Common Use Cases

• File extensions — a[href$='.pdf'], script[src$='.min.js'].
• Field suffixes — input[name$='_confirm'] for confirmation inputs.
• Error states — [id$='-error'] to style validation messages.
• Image formats — img[src$='.webp'] for modern image assets.
• Locale files — link[href$='.css'] vs script endings in bundler output.
• Legacy IDs — [id$='_old'] during migration cleanup.

📝 Notes

• Available since jQuery 1.0 — standard CSS3 attribute selector.
• Comparison is case-sensitive (per official jQuery docs).
• Suffix must be the final characters — query strings or hashes after the suffix break the match.
• Not the same as *= — substring anywhere vs strict suffix.
• Pair with element type and ID for performance: #downloads a[href$='.pdf'].
• For values ending in mixed case extensions, normalize in markup or match both patterns in JS.

💡 Best Practices