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

就像將來遇到該問題的人的筆記一樣，這些答案對於搜索作為屬性的特定value （即在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;
      }
    }
  }
);

上面創建了一個新的jQuery偽選擇器，可以像這樣使用：

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

它將選擇所有以“ test”開頭的輸入，或者：

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

它將選擇所有包含“測試”值的輸入。

還支持! 不， $用或結束=等號...

Answer 3

這樣做：

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

現場例子

或者，如果用“顏色”來表示“背景色”：

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

現場例子

Answer 4

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

Answer 5

出於信息目的將其扔在那里。

在實踐中，我將使用@BoltClock或@TJ Crowder的解決方案。

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

to select <div> elements that have a <input value="hello"> as a direct descendant. 這使用has-selector 選擇具有<input value="hello">作為直接后代的<div>元素。

我之所以選擇其他的原因是因為它們使用了相當簡單的有效CSS選擇器。 這是一個有效的替代方法，但執行速度可能會慢一些。