Schleifen durch Elemente mit jQuery basierend auf dem Namen Attribut anstelle von ID

Danke, dass Sie sich die Zeit nehmen, dies zu lesen.Schleifen durch Elemente mit jQuery basierend auf dem Namen Attribut anstelle von ID

Ich habe eine unbekannte Anzahl von (dynamisch eingefügten) Eingabeelementen in einem Formular, an das ich das in jQuery UI enthaltene Datepicker-Widget anhängen möchte.

Alle Eingabeelemente, an die ich den Datepicker anhängen möchte, haben eine Klasse von "date-pick". Offensichtlich, weil wir mehr als ein übereinstimmendes Element haben, brauchen wir mehr als nur einen Klassennamen, so dass der Datumswert zum Ursprungsfeld und nicht nur zur ersten Übereinstimmung zurückgegeben wird.

Normalerweise würde ich wahrscheinlich tun nur so etwas wie:

$("input.date-pick").each(function(){ 
    $(this).datepicker({dateFormat: "yy-mm-dd"}); 
});

jedoch im Code mit ich arbeite, die Eingabeelemente haben keine eindeutigen IDs, bis die Formulardaten gespeichert wird (etwas, das Ich kann nicht ändern), obwohl sie eindeutige Namensattributwerte des Formats name="field_id_x[y][z]" haben, das, wenn das Formular gespeichert wird, dann in eine ID des Formats id="field_id_xyz" konvertiert wird.

Also meine Frage ist, kann mir jemand zeigen, wie man alle Eingabeelemente mit einer Klasse von "date-pick" basierend auf ihren Namen Attributwerte durchlaufen?

(PS Es könnte auch wert sein, zu erwähnen, dass die Anzahl der passenden Eingabeelemente in Form erhöht werden kann/durch den Benutzer im laufenden Betrieb verringert.)

Quelle

2009-08-25 Tom Davies

ich Ihre Frage nicht folgen. Die jQuery, die Sie dort geschrieben haben, ist vollkommen gültig: Sie durchläuft alle Eingabeelemente mit einer Klasse von '.date-pick' und hängt ein Datepicker-Steuerelement an. Warum müssen sich die Namen einmischen? – VoteyDisciple

Votey, siehe meinen Kommentar zu T.J. Crowders Antwort unter –

@meta: ... und sehe meine Antwort. :-) –

Die Datumsauswahl muss nicht um die Elemente haben eine ID. Sie suchen bereits nach den Elementen dafür. Dies sollte funktionieren:

$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});

Hinweis Sie brauchen noch nicht einmal den each Anruf.

Komplettes Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>DatePicker Test Page</title> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script> 
<script type='text/javascript'> 
$(function() { 
    $('.dp').datepicker(); 
}); 
</script> 
</head> 
<body> 
<hr /> 
<input class='dp' type='text'> 
<input class='dp' type='text'> 
<input class='dp' type='text'> 
</body> 
</html>

Quelle

2009-08-25 10:28:18

Danke für deine Antwort. Ich habe das schon versucht, das Problem ist, dass unabhängig davon, welches Feld der Datepicker ausgelöst wird, der Datumswert in das erste übereinstimmende Eingabeelement eingegeben wird, das jquery findet. Zum Beispiel mit dem Code in Ihrer Antwort, wenn ich auf die dritte Eingabe klicken, der Datepicker ausgelöst wird, aber wenn ein Datum ausgewählt ist, wird es in das erste Eingabeelement im HTML-Format statt der dritten eingefügt ... –

@meta: Das ist Seltsamerweise tut es das nicht für mich, das Datum geht in die richtigen Felder, wenn ich diese Testseite starte. Ich habe versucht IE7, FF3.0 (noch nicht aktualisiert), Safari 3 (erm, dito), Opera 9.64 und Chrome 2. Ich denke, es muss etwas anderes auf Ihrer Seite sein, die dieses Verhalten verursacht ... –

. ..und FF 3.5.2 und Safari 4.0.3 (nur der Vollständigkeit halber). –

Der Code sollte funktionieren, wie es ist. Sie können jedoch eine Schleife durch namentlich wie folgt aus:

$("input[name*='field_id_'].date-pick").each(function(){ 
    $(this).datepicker({dateFormat: "yy-mm-dd"}); 
});

Quelle

2009-08-25 10:36:40

Prost für Ihre Antwort - Ich hätte aber erwähnt werden müssen, dass ich andere Eingabeelemente in der gleichen Form mit Namensattributen habe, die mit 'field_id_' beginnen, so müssen Sie basierend auf dem Namen und der Klasse durchlaufen. –

Ich habe die Klasse zum Selektor hinzugefügt. –

danke kaiz.net, aber dieser Code scheint nur dann zu triggern, wenn auf das erste (in HTML-Reihenfolge) Eingabeelement geklickt wird und nicht auf nachfolgende ... werde ich einen noch abgespeckteren Testfall ohne die dynamisch eingefügten Eingaben versuchen und sehen Wenn es dann funktioniert –

haben Sie versucht, so etwas wie

var namefield = "field_id_" 
$("date-pick").each(function(index, element) { 
    if ($(element).attr("name").substr(0,namefield.length) == namefield) { 
    // code to process 
    } 
});

Quelle

2012-01-31 12:10:05 user511941

Schleifen durch Elemente mit jQuery basierend auf dem Namen Attribut anstelle von ID

Antwort

Verwandte Themen