selector de jQuery para el valor de entrada

Question

tengo aquí el código ..

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

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

es posible seleccionar el div con el valor "hola" dentro y cambiar el color de la div seleccionado a rojo ...?

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

cualquier ayuda por favor ..

Answer 1

Usted desea seleccionar la entrada, luego tomar su matriz div:

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

Answer 2

Esto lo hace:

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

Live example

O si por el "color" que en realidad quería decir "color de fondo":

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

Live example

Answer 3

Lanzar esta ahí fuera para fines informativos.

En la práctica usaría las soluciones @BoltClock's o @T.J. Crowder's.

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

Este utiliza el has-selector^(docs) para seleccionar <div> elementos que tienen una <input value="hello"> como un descendiente directo.

La razón por la que preferiría las otras es por los simples y válidos selectores de CSS que usan. Esta es una alternativa válida, pero probablemente funcionará un poco más lento.

Answer 4

Así como una nota futuro para los que vienen a través de esta pregunta, las respuestas son correctas cuando se busca la específica value como un atributoes decir, el codificado en el código HTML — totalmente correcta según la pregunta formulada . Sin embargo, si el valor del campo lo cambia el usuario en cualquier punto, el valor atributo no se actualiza, solo el valor del elemento propiedad. Esto dará lugar a un comportamiento inesperado en la forma de seleccionar los elementos que en realidad tienen diferentes valores de corriente ... en lugar — o al menos hasta que encuentre una mejor manera — He estado usando el siguiente:

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

Lo anterior crea un nuevo selector de jQuery seudo, que puede ser utilizado de esta manera:

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

que seleccionará todas las entradas que empiezan con la "prueba" de valor, o:

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

que seleccionará todas las entradas que contengan "prueba" en cualquier parte de su valor.

También son compatibles ! no, $ termina con = es igual a ...

Answer 5

Versión de script de café de @pebbl sobre la respuesta.

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