用于输入值的 jquery 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5060652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery Selector for input value
提问by Vincent Dagpin
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...?
是否可以选择内部值为“hello”的div并将所选div的颜色更改为红色...？
$("div input[value='hello']").css("background","red"); //i have this in mind
//but i think its wrong:D
any help please..
任何帮助请..
回答by BoltClock
You want to select the input, then take its parent div:
您要选择输入，然后取其父项div：
$("input[value='hello']").parent("div").css("background", "red");
回答by Pebbl
Just as a future note to those that come across this question, these answers are correct for when searching for the specific valueas an attributei.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 attributeis 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:
正如对遇到此问题的人的未来说明一样，这些答案在搜索特定属性时是正确的，即在 HTML 中硬编码value的属性- 根据所提出的问题完全正确。但是，如果用户在任何时候更改了字段的值，则不会更新value属性，只会更新元素的 value属性。这将导致以选择实际具有不同当前值的元素的形式出现意外行为......相反 - 或者至少在我找到更好的方法之前 - 我一直在使用以下内容：
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:
上面创建了一个新的 jQuery 伪选择器，可以像这样使用：
$('input:field-value(^test)');
Which will select all inputs that start with the value "test", or:
这将选择以值“test”开头的所有输入，或者：
$('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...
还支持!不是，$以或=等于结尾...
回答by T.J. Crowder
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");
回答by user113716
Throwing this out there for informational purposes.
出于信息目的，将其扔在那里。
In practice I'd use @BoltClock'sor @T.J. Crowder'ssolutions.
在实践中，我会使用@BoltClock或@TJ Crowder 的解决方案。
$("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.
这使用has-selector(docs)来选择<div>具有<input value="hello">作为直接后代的元素。
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.
我更喜欢其他的原因是因为他们使用了相当简单的有效 CSS 选择器。这是一个有效的替代方案，但执行速度可能会慢一些。
回答by Moreno
Coffee script version of @pebbl above answer.
以上答案的@pebbl 的咖啡脚本版本。
##############################################################################
###
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
)
