web-dev-qa-db-fra.com

jquery Selector pour la valeur d'entrée

j'ai ici le code ..

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

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

est-il possible de sélectionner le div avec la valeur "bonjour" à l'intérieur et de changer la couleur du div sélectionné en rouge ...?

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

toute aide s'il vous plaît ..

jqueryinputjquery-selectors
34
Vincent Dagpin

Vous voulez sélectionner l'entrée, puis prendre son parent div:

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

Tout comme une note future à ceux qui rencontrent cette question, ces réponses sont correctes lorsque vous recherchez le value spécifique comme attribut c'est-à-dire celui codé en dur dans le HTML - complètement correct selon la question posée. Cependant, si la valeur du champ est modifiée par l'utilisateur à tout moment, la valeur attribut n'est pas mise à jour, seule la valeur de l'élément propriété. Cela conduira à un comportement inattendu sous la forme de la sélection d'éléments qui ont en fait des valeurs actuelles différentes ... à la place - ou du moins jusqu'à ce que je trouve une meilleure façon - j'ai utilisé ce qui suit:

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;
      }
    }
  }
);

Ce qui précède crée un nouveau pseudo sélecteur jQuery, qui peut être utilisé comme ceci:

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

Qui sélectionnera toutes les entrées commençant par la valeur "test", ou:

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

Qui sélectionnera toutes les entrées qui contiennent "test" n'importe où dans sa valeur.

Sont également pris en charge ! ne pas, $ se termine par ou = équivaut à...

39
Pebbl

Cela le fait:

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

exemple en direct

Ou si par "couleur" vous vouliez vraiment dire "couleur de fond":

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

exemple en direct

4
T.J. Crowder

Version de script de café de @pebbl au-dessus de la réponse.

##############################################################################
###
    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

Jeter cela là-bas à des fins d'information.

En pratique, j'utiliserais les solutions @ BoltClock ou @ T.J. Crowder's .

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

Cela utilise le has-selector(documents) pour sélectionner <div> éléments qui ont un <input value="hello"> en tant que descendant direct.

La raison pour laquelle je préfère les autres est à cause des sélecteurs CSS valides assez simples qu'ils utilisent. C'est une alternative valable, mais elle fonctionnera probablement un peu plus lentement.

2
user113716