Attribute Contains Prefix Selector [name|="value"]

Categories: Selectors > Attribute

attributeContainsPrefix 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 either equal to a given string or starting with that string followed by a hyphen (-).

This selector was introduced into the CSS specification to handle language attributes.

Example:

Finds all links with an hreflang attribute that is english.

<!DOCTYPE html>
<html>
<head>
  <style>
a { display: inline-block; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <a href="example.html" hreflang="en">Some text</a> 

  <a href="example.html" hreflang="en-UK">Some other text</a>

  <a href="example.html" hreflang="english">will not be outlined</a>
  
<script>
$('a[hreflang|="en"]').css('border','3px dotted green');
</script>

</body>
</html>

Demo:

Support and Contributions

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

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

Anonymous

var str=$(‘[value|=Submit]‘).html();
$(‘#result’).html(str);

I have done like this but it is not returning the element? Why????? Plz help…
Jayarajanjn

Please try to avoid 'a' tag to explain the 'attribute' related functionality. When i looked at the examples in hurry, I took 'a' for attribute and as a replacement for the '#' hash in case of id selector
http://twitter.com/NewGenerationC Клюшин Герман

I have complex form with array of items that created dinamicaly.
<input name=”new_items['+counter+'][price]” onchange=”countRow (this)” value=”">
<input name=”new_items['+counter+'][quantity]” onchange=”countRow (this)” value=”">
…..
Than i need to calculate a total sum in the onchange event handler of every input.
How I can do this?

kuchara

I'm doing this too. You should look at attributeStartsWith and attributeEndsWith selectors in jQuery.

Probably something like this will work (for sum all prices):

function countRow(obj){
var sum;
$(“input[name^='new_items']“).filter(“[name$='[price]']”).each(function(i){
//optionally change decimal delimiters, remove spaces etc.:
value = $(this).val().replace(' ','');
sum += parseFloat(value);
});
//in 'sum' you should have desired sum :]
}

Aiden

I can’t figure out how to use this when the ‘name’ of an input element is an array:

so:

$(‘input[name=user[password]]’)

Which doesn’t work..

Xue Yu

I think it need to be $(‘input[name=user\[password\]]’)
http://keithpickett.myopenid.com/ Keith Pickett

This works for me:
$('input:checkbox[name="form[clubbenefits][]“]').each( function ()……

http://pulse.yahoo.com/_FXJJB4WVGQDSFPA3VZ4UJFYLLU Nathan

does finding an element using a pseudo class selector like this take longer then just using a class or id?
Duyanhphamkiller

in this example. replace “|=” by “!=”
Onotole

var myVar = ‘OloLo’;
$(‘a[hreflang|=’+myVar)
Manda Yugana

I think you missed something :

var myVar = ‘OloLo’;
$(‘a[hreflang|='+myVar+']‘)

jQuery API

Attribute Contains Prefix Selector [name|="value"]