jQuery API

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

Categories: Selectors > Attribute

attributeEndsWith selector

version added: 1.0jQuery('[attribute$="value"]')

  • attribute
    An attribute name.
    value
    An attribute value. Can be either an unquoted single word or a quoted string.

Description: Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

Example:

Finds all inputs with an attribute name that ends with 'letter' and puts text in them.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="newsletter" />

  <input name="milkman" />
  <input name="jobletter" />
<script>$('input[name$="letter"]').val('a letter');</script>

</body>
</html>

Demo:

Support and Contributions

Need help with Attribute Ends With Selector [name$="value"] or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to Attribute Ends With Selector [name$="value"]? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

* All fields are required
  • http://blog.josh420.com/ Josh Stodola

    Is it possible to use an array of values for attribute comparison? For instance, say I want to get all links that point to an image. Is there an easier way than the following?

    $(“a[href$=.jpg],a[href$=.jpeg],a[href$=.png]“);

    • Nebyoolae

      I'm trying to figure this out right now and can't. I was hoping that the conditional selector would support full-on regex, but it doesn't appear to do that.

  • http://www.google.com/profiles/jesse.gavin Jesse Gavin

    Is the value case sensitive? In other words are the following selectors equal?

    a[href$=PNG] and a[href$=png]

    • http://www.learningjquery.com/ Karl Swedberg

      Yes and no. Yes, the value is case sensitive; no, those two selectors are not equal.

    • Greasy Sneakers

      You will be better off filtering after the selector:

      $(“a”).filter(function(){ return /(jpe?g|png|gif)$/i.test($(this).attr('href')); })

  • Anonymous

    I notice that the 2007 jQuery Reference Guide places an @ in front of the attribute. E.g., on page 30: $(‘a[@rel$=self]‘). Is the @ no longer necessary?

    • http://www.learningjquery.com/ Karl Swedberg

      The [@attribute] syntax has been removed from jQuery. If you use the “@” in jQuery 1.3 or later, it will not work.

  • http://twitter.com/hugenerd Jason Birchler

    is there a way to pass a variable as the value?

    • Nathan MacInnes

      $(“a[href$=" + myUrl + "]“)

    • Nathan MacInnes

      $(“a[href$=" + myUrl + "]“)

  • Frank Gregor

    I have a WordPress navigation and I would like to trigger the mouse over events. But my selector like:

    $j('#navi li:not(:has([class$=current_page_item])) a')

    doesn't work. Each 'li' tag has more classes separated by a space character. Only at the active menu item the class value ends with the 'current_page_item' class. But my selector trigger all menu items! Whats going wrong here anyway…?

  • Mike

    Having an issue chaining the regex selectors in IE7. Here's what I'm doing:

    $(“img[src^=/path/to/my/image][src$=.jpg]“)

    also tried using quotes

    $(“img[src^='/path/to/my/image'][src$='.jpg']“)

    This works in FF, Safari and IE8, but not IE7. Not tested in IE6.

    • Mike

      I ended up using doing this:

      $('img:visible').filter(function(){ return /(/path/to/images/[wd/-]+.jpg$)/.test(this.src); })

      but it would be cool if the above worked in all browsers.

  • Kabijamp
  • http://twitter.com/getsetbro .get().set().bro()

    How about a Attribute does not End With Selector? Such as:
    a[name!$="Home.aspx"]

    Today this would be done as:
    $('a').not('[name$="Home.aspx"]')

  • http://twitter.com/getsetbro .get().set().bro()

    How about a Attribute does not End With Selector? Such as:
    a[name!$="Home.aspx"]

    Today this would be done as:
    $('a').not('[name$="Home.aspx"]')