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

What Is [name$="value"]?

The attribute ends-with selector matches elements whose attribute value ends exactly with a given string (suffix). Available since jQuery 1.0 (standard CSS3).

$("[attribute$='value']")

$("input[name$='letter']")
  ✓ name="newsletter"
  ✓ name="loveletter"
  ✗ name="letterbox"    (ends with "box")
  ✗ name="myLetter"     (case differs)

$=  ≠  ^=   // ^= is start only
$=  ≠  *=   // *= is anywhere

How to Use [name$="value"]

Name the attribute, pick a suffix, then query — casing must match exactly.

1. Choose the attribute (name, href, id, …).
2. Write $("[attr$='suffix']") — or with a tag: $("input[name$='letter']").
3. Confirm the value truly ends with that string (not just contains it).
4. Watch case: .pdf and .PDF are different suffixes.

Pseudocode

attrName = given attribute
suffix   = given value
matches  = empty list

for each element with attrName:
    v = element.getAttribute(attrName)
    if v ends with suffix:            // case-sensitive
        add element

return jQuery(matches)

Cheat Sheet

Keep these facts handy while matching attribute suffixes.

Live Preview

Run ends-with / starts-with / contains selectors against sample inputs and see which name values match.

$("input[name$='letter']")
matched: 2
names: newsletter, loveletter

/* ends exactly with letter */

jQuery Examples

Short, copy-ready snippets. Open a browser with jQuery loaded, or use Try It Yourself for a live editor.

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

var names = $("input[name$='letter']").map(function () {
  return this.name;
}).get().join(", ");

console.log(names);
// newsletter, loveletter

newsletter, loveletter
(letterbox skipped; matched values become "a letter")

console.log("$= :", $("input[name$='letter']").length);
console.log("^= :", $("input[name^='letter']").length);

// $= matches newsletter, loveletter
// ^= matches letterbox (starts with letter)

$= : 2
^= : 1

Different ends of the string — different match sets

var hrefs = $("a[href$='.pdf']").map(function () {
  return $(this).attr("href");
}).get().join(", ");

console.log(hrefs);
// /files/guide.pdf  (.PDF is skipped — case-sensitive)

/files/guide.pdf
(.PDF and /about are skipped)

var ids = $("[id$='-panel']").map(function () {
  return this.id;
}).get().join(", ");

console.log(ids);
// main-panel, side-panel

main-panel, side-panel
(panel-main is skipped — suffix, not prefix)

console.log("letter :", $("input[name$='letter']").length);
console.log("Letter :", $("input[name$='Letter']").length);

// name="myLetter" matches only the second query

letter : 2
Letter : 1

Lowercase "letter" does not match name="myLetter"

Performance Notes

Attribute selectors are standard CSS, so jQuery can often use the browser engine. Narrow with a tag or a container on large pages.

Key Takeaways