CODEWITHSUNDEEP
jqueryinputjquery-selectors
Vincent Dagpin
Vincent Dagpin

Reputation: 3611

jquery Selector for input value

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

Upvotes: 41

Views: 98999

Answers (5)

Moreno
Moreno

Reputation: 1617

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
  )

Upvotes: 2

Pebbl
Pebbl

Reputation: 36005

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

Upvotes: 41

user113716
user113716

Reputation: 322492

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.

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074335

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

Upvotes: 4

BoltClock
BoltClock

Reputation: 723668

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

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

Upvotes: 54

Related Questions