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. Quotes are optional.

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:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for Attribute Starts With Selector [name^=value] below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • 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?
  • guru4vedi
    I've a form with several fields prefixed with "x_" and "y_" can I fetch them using:

    $("form > [name^='x_']")

    OR is there a better way to achieve this?
  • Matt
    This only works when the class starts with a particular phrase, not when a class name starts with a particular phrase.

    <div class="main normal show5">myDiv</div>

    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"?
  • 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?
  • 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() )?