Alex Rivera | Logout

jquery Selector for input value

Asked 2011-02-20T22:50:39.063
42

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..

Edit
Report

2 Answers

56

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

$("input[value='hello']").parent("div").css("background", "red");
answered 2011-02-20T22:53:37.237
41

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 !<

answered 2013-02-22T19:21:56.503

Your Answer