Abrufen von Feldeigenschaften in JQuery

Question

Ich bin neu in JQuery.

Ich habe viele Textfelder, Textfelder in einem DIV erstellt. Innerhalb dieses div habe ich getrennte divs für jedes Feld (das ein Label-Tag und das Feld (text/textarea) enthält) in einer geordneten Weise gehalten.

Und jetzt versuche ich, die Namen der Etiketten und den Typ, die Größe dieser Felder, beim Klicken auf Speichern abrufen. Wie kann ich dies in JQuery tun?

Auch ich kann nicht wissen, welche Felder nach diesem Etikett sind. Es kann alles Text, Textarea usw. sein. Ist es möglich, zu finden, welches Tag dem Etikett-Tag folgt? Hier

ist die html:

<div id="fb_contentarea_col1down21"> 

    <div id="1"> 
       <label id="label1">name</label> 
       <input type="text" style="width: 200px;" id="input1"/><br/> 
       <div id="instr1"/> 
      </div> 
      <div id="2"> 
       <label id="label2">address</label> 
       <textarea id="input2" style="width: 200px;"/><br/> 
       <div id="instr2"/> 
      </div> 

     </div><!-- End of fb_contentarea_col1down21 --> 

<div id="save"><input type="submit" value="Save Form" class="button" id="saveForm"/> 

Answer 1

$('#1 label').text(); // gets label contents: "name" 

var input1 = $('#1 label').next(); // gets input1 
input1.width(); // input1's width: 200 
input1.attr('type'); // input1's type: "text" 
input1[0].tagName; // input1's tag type: "input" ([0] gets the dom element) 

$('#2 label').next()[0].tagName; // input2's tag type: "textarea" 

Answer 2

Neben sandersa Antwort, eine Aktion auszuführen, wenn die Schaltfläche geklickt wird man so etwas tun würde:

$("#saveForm").click(function() { 
    // Borrowing code from sandersa's answer 
    alert($('#2 label').next()[0].tagName); 
}); 

Answer 3

(Verlängerung auf Sandersas Antwort)

Wenn Sie "für" -Attribut für die Etiketten verwendeten, dann konnten Sie th loswerden ID auf Wrapper divs oder der gesamte Wrapper div, wenn sein einziger Zweck dabei half, das zugehörige Label zu identifizieren.

<label for="input1">name</label> 
    <input type="text" style="width: 200px;" id="input1"/><br/> 
    <div id="instr1"/> 
    <label for="input2">address</label> 
    <textarea id="input2" style="width: 200px;"/><br/> 
    <div id="instr2"/> 

Dann könnten Sie schreiben,

$('#save').click(function() { 
    $.each(['input1', 'input2'], function (idx, selector) { 
     var label = $('label[for=' + selector + ']'); 
     var input = $('#' + selector); 

     alert(label.text());  // label name 
     alert(input.width());  // input width 
     alert(input[0].tagName); // tagname 
     alert(input.attr('type')); // type attribute 
    }); 
});