web-dev-qa-db-ja.com

入力値のjqueryセレクター

ここにコードがあります。

 <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

助けてください..

jqueryinputjquery-selectors
34
Vincent Dagpin

入力を選択して、その親divを取得します。

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

ただ、この問題に遭遇しているものに、将来のノートとして、これらの答えは、特定を検索するときのために適切である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」を含むすべての入力が選択されます。

!ではなく、$で終わる、または=と等しい...もサポートされます...

39
Pebbl

これはそれを行います：

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

実例

または、「色」で本当に「背景色」を意味する場合：

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

実例

4
T.J. Crowder

上記の@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
  )
2
Moreno

情報提供の目的でこれを捨てます。

実際には @ BoltClock's または @ T.J。Crowder's ソリューションを使用します。

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

これは has-selectorを使用します（ドキュメント）<div>を直接の子孫として持つ<input value="hello">要素を選択します。

私が他のものを好む理由は、彼らが使用するかなり単純で有効なCSSセレクターのためです。これは有効な代替手段ですが、おそらく少し遅くなります。

2
user113716