jquery Selector for input value

Question

i have here the code..

 <div>
    <input type="hidden" value="hello" />
 </div>

 <div>
    <input type="hidden" value="world" />
 </div>

is it possible to select the div with the value "hello" inside and change the selected div's color to red...?

 $("div input[value='hello']").css("background","red"); //i have this in mind
                                                        //but i think its wrong:D

any help please..

Answer 1

Coffee script version of @pebbl above answer.

##############################################################################
###
    jQuery select extend 
    @pebbl http://stackoverflow.com/a/15031698/1271868
##############################################################################
jQuery ->
  jQuery.extend(
    jQuery.expr[':'],
    # check that a field's value property has a particular value
    'field-value': (el, indx, args) ->
      v = $(el).val()
      if (a = args[3])
        switch a.charAt(0)
          # begins with
          when '^' then return v.substring(0, a.length-1) is
            a.substring(1, a.length)
          # ends with
          when '$' then return v.substr(v.length-a.length-1, v.length) is 
            a.substring(1, a.length)
          # contains
          when '*' then return v.indexOf(a.substring(1, a.length)) isnt -1 
          # equals
          when '=' then return v is a.substring(1, a.length) 
          # not equals
          when '!' then return v isnt a.substring(1, a.length) 
          # equals
          else return v is a 
      else
        return !!v
  )

Answer 2

This does it:

$("div > input[value=hello]").parent().css("color", "red");

Live example

Or if by "color" you really meant "background color":

$("div > input[value=hello]").parent().css("background-color", "red");

Live example

Answer 3

Throwing this out there for informational purposes.

In practice I'd use @BoltClock's or @T.J. Crowder's solutions.

$("div:has( > input[value='hello'] )").css("background", "red");

This uses the has-selector^(docs) to select <div> elements that have a <input value="hello"> as a direct descendant.

The reason I'd prefer the others is because of the fairly simple valid CSS selectors they use. This is a valid alternative, but will likely perform a little slower.

Answer 4

You want to select the input, then take its parent div:

$("input[value='hello']").parent("div").css("background", "red");

Answer 5

Just as a future note to those that come across this question, these answers are correct for when searching for the specific value as an attribute i.e. the one hard-coded in the HTML — completely correct as per the question asked. However, if the value of the field is changed by the user at any point the value attribute is not updated, only the element's value property. This will lead to unexpected behaviour in the form of selecting elements that actually have different current values... instead — or at least until I find a better way — I've been using the following:

jQuery.extend(
  jQuery.expr[':'],
  {
    /// check that a field's value property has a particular value
    'field-value': function (el, indx, args) {
      var a, v = $(el).val();
      if ( (a = args[3]) ) {
        switch ( a.charAt(0) ) {
          /// begins with
          case '^':
            return v.substring(0,a.length-1) == a.substring(1,a.length);
          break;
          /// ends with
          case '$':
            return v.substr(v.length-a.length-1,v.length) == 
              a.substring(1,a.length);
          break;
          /// contains
          case '*': return v.indexOf(a.substring(1,a.length)) != -1; break;
          /// equals
          case '=': return v == a.substring(1,a.length); break;
          /// not equals
          case '!': return v != a.substring(1,a.length); break;
          /// equals
          default: return v == a; break;
        }
      }
      else {
        return !!v;
      }
    }
  }
);

The above creates a new jQuery pseudo selector, which can be used like so:

$('input:field-value(^test)');

Which will select all inputs that start with the value "test", or:

$('input:field-value(*test)');

Which will select all inputs that contains "test" anywhere in it's value.

Also supported are ! not, $ ends with or = equals...