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

请帮忙一下，谢谢。

- Vincent Dagpin

Answer 1

你想选择输入框，然后获取它的父级 div 元素：

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

- BoltClock

---

@Phil：BoltClock的解决方案查找任何值为“hello”的input，然后仅选择这些元素的父级是div元素，并将它们的背景设置为红色。具有不同值的input元素将被忽略，而其父级不是div元素的值为“hello”的input元素也不会得到更新（虽然可以用另一种方式）。不过，这并不是最高效的方法。 - T.J. Crowder

@vrynxzent：为了充分利用浏览器可能具有的任何内置选择器处理功能，请将第一部分更改为 $（“div> input [value ='hello']”）。这将淘汰不是 div 元素的直接子级别输入，BoltClock 的 .parent（“div”） 将在无法优化的层面上执行此操作。 - T.J. Crowder

这是根据问题100％正确的答案，但值得注意的是，这对于用户可以更改的选择或文本输入实际上不起作用。 Pebbl 在下面提供的解决方案解决了这个问题。 - Jan Zyka

@Jan Zyka：确实，我没有看到pebbl的答案，所以谢谢你提醒我。 - BoltClock

这个问题有点含糊不清，因为它没有指定想要针对属性还是特性。除非你知道区别并且确定想要特性，否则这个解决方案看起来可以工作，但可能会表现出你意料之外的行为，正如其他人所指出的那样。 - jinglesthula

Answer 2

作为对于那些遇到这个问题的人的未来提醒，这些答案是针对搜索特定value作为属性，即在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 '$':
            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伪选择器，可以像这样使用：

$('input:field-value(^test)');

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

$('input:field-value(*test)');

这将选择所有包含“test”在其值中的输入。
还支持！不是，$以...结束或=等于...

- Pebbl

---

非常感谢您的解释和解决方案，只是为了“验证”您的理论并可能提供另一种解决方案，可以像这样向（所有或特定）输入添加事件以强制创建值属性：$(document).on("change", "input", function(){ $(this).attr("value", $(this).val()); }); 现在默认提供的选择器 input[value=test] 也按预期工作。尽管如此，对于您的解释和解决方案表示赞许！ - Piemol

Answer 3

这就是它的作用：

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

实时示例

或者如果您真正意思是“颜色”，而不是“背景颜色”：

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

Live example

- T.J. Crowder

Answer 4

为了提供信息，我在这里提供翻译。

实践中，我会使用@BoltClock或者@T.J. Crowder的解决方案。

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

这个使用 has-selector^(文档) 来选择直接包含 <input value="hello"> 的 <div> 元素。

我更喜欢其他方法，因为它们使用的有效CSS选择器相对简单。虽然这也是一种有效的替代方案，但可能会稍微慢一些。

- user113716

Answer 5

@pebbl上面回答的咖啡脚本版本。

##############################################################################
###
    jQuery select extend 
    @pebbl https://dev59.com/QG445IYBdhLWcg3wDWGc#15031698
##############################################################################
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
  )

- Moreno