在JQuery中检索字段属性

Question

我是JQuery的新手。

我创造了许多文本框，在DIV textarea的领域。在那个div里面，我为每个字段（包括一个标签标签和一个字段（text/textarea））以有序的方式保存了不同的div。

，现在我试图检索标签名称和类型，这些字段的大小，在单击保存时。我如何在JQuery中这样做？

此外，我可能不知道该标签后有什么字段。它可能是任何文本，textarea等。是否有可能找到标签后面是什么标签？

下面是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

除了sandersa答案执行操作时，单击按钮你会做这样的事情：

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

Answer 3

（延长在sandersa的答案）

如果使用“的”属性标签，那么你可以摆脱日。如果它的唯一目的是帮助识别相关标签，则在包装div上包含e id或整个包装div。

<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"/> 

然后，你可以写，

$('#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 
    }); 
});