jQuery API

Attribute Starts With Selector [name^="value"]

Categories: Selectors > Attribute

attributeStartsWith 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 beginning exactly with a given string.

This selector can be useful for identifying elements in pages produced by server-side frameworks that produce HTML with systematic element IDs. However it will be slower than using a class selector so leverage classes, if you can, to group like elements.

Example:

Finds all inputs with an attribute name that starts with 'news' 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="newsboy" />
<script>$('input[name^="news"]').val('news here!');</script>

</body>
</html>

Demo:

Support and Contributions

Need help with Attribute Starts 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 Starts With Selector [name^="value"]? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

  • Dan

    Does this selector not work with multiple classes?

    I’m using it in the following example to toggle the visibility of multiple divs:
    $(‘[class^=show]‘).click(function() {…

    If the anchor has more than one class, e.g. “<a class="show1 foo," the script does not execute.

    Is there anyway to target a partial name match on an element with multiple classes?

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

      It works just fine. See a demo here:
      http://jsbin.com/udeyu3/2

      Must be something wrong in your code. Did you remember to prevent the default action from occurring ( by including return false or event.preventDefault() )?

      • http://www.idi.ntnu.no/~satre/ Rune Sætre

        It only works when the class you are looking for is really “the first” class. Your example does not work if you change the class from “show2 hey” to “hey show2″.

        Do you have another good solution for that situation?

  • Matt

    This only works when the class starts with a particular phrase, not when a class name starts with a particular phrase.

    myDiv

    In the above example the div has class name’s of main, normal and show5. How could we include this div using a selector for all class name’s (rather than class attributes) begining with “show”?

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

      A simple (but not very flexible) solution would be to just use a .filter() with a function:

      $(‘div’).filter(function() {
      return /^show|sshow/.test(this.className);
      });

      You could also write a fairly simple selector plugin. Here is one that you can use with any attribute, not just a class:

      (function($) {
      $.extend($.expr[':'], {
      attrStart: function(element, index, matches, set) {
      matches = matches[3].split(‘|’);

      var attr = matches.length > 1 ? matches.shift() : ‘className’,
      val = matches.join(”),
      re = new RegExp(‘^’ + val + ‘|\s’ + val);

      attr = $(element).attr( attr );

      return !!attr && re.test(attr);
      }

      });
      })(jQuery);

      Usage would be something like this, using a “pipe” delimiter between the attribute name and the value you’re looking for:

      $(‘div:attrStart(class|show)’)

      The plugin makes “class” the default attribute, so you could also do this:

      $(‘div:attrStart(show)’)

  • John

    I have input field with name attribute set to:
    grid1Params.ActiveFilters[0].Expressions[0].Value

    Then I try to get it with such selector:
    $(“input[name^=grid1Params\.ActiveFilters\[0\]]”)[0]

    It works with Firefox but not with IE7.

    I've tried this version too:
    $(“input[name^='grid1Params.ActiveFilters[0]']”)[0]

    Once again it worked with Firefox but not IE7.

    Jquery version is 1.3.2.

    Any ideas?

  • mcm

    Is there a way to select multiple object types (aka input AND text area ) with this type of selector:

    i am trying something like this: $(“input|textarea[name^='answer_62_']“) which is supposed to find 5 items (4 input checkboxes and 1 text area) that names start with “answer_62_” it finds the inputs but not the text area.

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

      You can do that a few ways. Here are two:

      $(‘input, textarea’).filter(‘[name^=answer_62_]‘)
      $(‘input[name^=answer_62_], textarea[name^=answer_62_]‘)

      • Nathan

        or just $('[name^=answer_62_]').

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

          Yes, but that isn't recommended. It's akin to doing $('*[name^=answer_62_]'). In other words, it inspects every single element in the DOM to see if it has a name property that starts with “answer_62_”. Better to reduce the number of elements you have to do that with first.

  • Tesr

    fjjfgjv vugjhguhgujh

  • cchui

    $('input[name^=ATTR_]', '#form').change(function () { ….}); is not working in IE8. Please help!

    • http://twitter.com/TLUL_tw TLUL

      I'd suggest $(“input[name^='ATTR_'], #form”).change(….). The only difference is that there are quotes around ATTR_ and that the comma is inside a single quotation (I think that's the way you're supposed to do it).

  • http://checat.livejournal.com/ Konstantin

    Current implementation of attribute selectors uses “element.attribute” instead of “element.getAttribute('attribute'). This makes a difference when used for matching URL attributes (href or src). With “element.attribute” it takes full URL, whereis with “element.getAttribute()” it would take attribute value as-is.

    It should be explicitly noted here.

    (I assume second case more intuitive and correct, but CSS spec seems to not specify it explicitly.)

  • Gopi

    why this piece of code don't work in IE7 :(
    var test = $(“.classname:input[name^='attr_quantity_']“).val();
    alert(test) nothing happens in IE7.

  • http://allandelacruz.com Xacto01

    ignore this post – found the solution

  • Pingu

    Is there a way to match both the beginning and end of an id name?

    • http://twitter.com/affector Martin Booze

      I've been searching for such a possibility recently, didn't find a way to do it with selectors only. However, using the “ends with” selector with a .filter() method seems to do the trick, e.g. the following piece of code will show id of all elements which have the id beginning with “foo” and ending with “bar”:

      $(“[id^=foo]“).filter(“[id$=bar]“).each( function() {
      alert($(this).attr('id'));
      });