jquery Selector für den Eingabewert

habe ich hier den code..

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

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

ist es möglich, wählen Sie die div mit dem Wert "Hallo" und ändern Sie den ausgewählten div Farbe rot...?

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

jede Hilfe bitte..

InformationsquelleAutor der Frage Vincent Dagpin | 2011-02-20

39

Sie möchten, wählen Sie den Eingang, dann nehmen Sie Ihre Eltern div:
```
$("input[value='hello']").parent("div").css("background", "red");
```
InformationsquelleAutor der Antwort BoltClock

Nur als Zukunft Hinweis für diejenigen, die kommen über diese Frage, diese Antworten richtig sind, für bei der Suche nach den spezifischen value als Attribut d.h. die hard-coded im HTML — völlig korrekt, wie pro die Frage. Wenn jedoch der Wert des Feldes geändert wird, die durch den Nutzer an jedem Punkt den Wert Attribut wird nicht aktualisiert, nur das element den Wert Eigenschaft. Dies führt zu unerwartetem Verhalten in form von Auswahl der Elemente, die tatsächlich verschiedene aktuelle Werte... statt — oder zumindest bis ich einen besseren Weg finden — ich habe mit dem folgenden:

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

Den oben erzeugt ein neues jQuery-pseudo-Selektor, die verwendet werden können, etwa so:

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

Wird wählen Sie alle Eingänge, die beginnen mit dem Wert "test", oder:

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

Wird wählen Sie alle Eingänge, die die Zeichenfolge "test" irgendwo in der ist es Wert.

Ebenfalls unterstützt wird ! nicht, $ endet mit oder = gleich...

InformationsquelleAutor der Antwort Pebbl

4

Dieser tut es:
```
$("div > input[value=hello]").parent().css("color", "red");
```
Live-Beispiel

Oder wenn Sie von "Farbe" Sie meinte wirklich "background-color":
```
$("div > input[value=hello]").parent().css("background-color", "red");
```
Live-Beispiel

InformationsquelleAutor der Antwort T.J. Crowder
2

Werfen dies draußen für informative Zwecke.

In der Praxis verwende ich @BoltClock ist oder @T. J. Crowder ist Lösungen.
```
$("div:has( > input[value='hello'] )").css("background", "red");
```
Diese nutzt die -Selektors^(docs) zu wählen <div> Elemente <input value="hello"> als ein direkter Nachkomme.

Dem Grund würde ich es vorziehen, die andere ist wegen der relativ einfachen gültigen CSS-Selektoren, die Sie verwenden. Dies ist eine gültige alternative, aber wird wahrscheinlich führen Sie ein wenig langsamer.

InformationsquelleAutor der Antwort user113716

Kaffee-script-version von @pebbl obige Antwort.

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

InformationsquelleAutor der Antwort Moreno

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.