Селектор jquery для входного значения

Question

у меня есть здесь код ..

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

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

возможно ли выбрать div со значением "hello" внутри и изменить цвет выбранного 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 & mdash; полностью правильно в соответствии с заданным вопросом. Однако если значение поля изменяется пользователем в любой момент, значение атрибут не обновляется, только значение элемента свойство . Это приведет к неожиданному поведению в форме выбора элементов, которые на самом деле имеют разные текущие значения ... вместо & mdash; или, по крайней мере, пока я не найду лучший способ & mdash; Я использовал следующее:

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's или @T.J. Решения Краудера .

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

При этом используются has-selector ^{(документы)} для выбора <div> элементов, которые имеют <input value="hello"> в качестве прямого потомка.

Причина, по которой я бы предпочел другие, заключается в том, что они используют довольно простые допустимые селекторы CSS. Это правильная альтернатива, но, скорее всего, она будет работать немного медленнее.