jquery 输入值选择器

Question

我这里有代码..

 <div>
    <input type="hidden" value="hello" />
 </div>

 <div>
    <input type="hidden" value="world" />
 </div>

是否可以选择内部值为“hello”的div并将所选div的颜色更改为红色...？

 $("div input[value='hello']").css("background","red"); //i have this in mind
                                                        //but i think its wrong:D

请帮忙..

Answer 1

您想要选择输入，然后获取其父 div：

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

Answer 2

正如以后遇到此问题的人的注释一样，当将特定值作为属性（即在HTML中硬编码的属性）进行搜索时，这些答案是正确的- 根据所提出的问题完全正确。但是，如果用户在任何时候更改了字段的值，则属性值不会更新，而只会更新元素的属性值。这将导致意外的行为，以选择实际上具有不同当前值的元素的形式...相反 - 或者至少在我找到更好的方法之前 - 我一直在使用以下内容：

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 '
上面创建了一个新的 jQuery 伪选择器，可以这样使用：
$('input:field-value(^test)');

它将选择以值“test”开头的所有输入，或者：
$('input:field-value(*test)');

它将选择其值中任何位置包含“test”的所有输入。
还支持 ! 不、$ 结尾或 = 等于...
:
            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;
      }
    }
  }
);

上面创建了一个新的 jQuery 伪选择器，可以这样使用：

它将选择以值“test”开头的所有输入，或者：

它将选择其值中任何位置包含“test”的所有输入。

还支持 ! 不、$ 结尾或 = 等于...

Answer 3

这样做：

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

实例

或者，如果“颜色”实际上是指“背景颜色”：

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

实例

Answer 4

出于提供信息的目的将其扔在那里。

在实践中，我会使用 @BoltClock's 或 @TJ Crowder 的 解决方案。

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

这使用 has-selector^{(docs)< /i>} 选择具有 作为直接后代的

元素。

我更喜欢其他的原因是因为他们使用相当简单的有效 CSS 选择器。这是一个有效的替代方案，但可能执行速度会慢一些。

Answer 5

以上答案的 @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
  )