Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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

$("input[value='hello']").parent("div").css("background", "red");
over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!