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..
You want to select the input, then take its parent div:
$("input[value='hello']").parent("div").css("background", "red");
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...
This does it:
$("div > input[value=hello]").parent().css("color", "red");
Or if by "color" you really meant "background color":
$("div > input[value=hello]").parent().css("background-color", "red");