Получить свойства поля в JQuery

Question

Я новичок в JQuery.

Я создал много текстовых полей, полей текстовой области в DIV. Внутри этого div я упорядоченно хранил отдельные div для каждого поля (которое включает тег label и поле (text / textarea)).

А теперь я пытаюсь получить имена меток и тип, размер этих полей при нажатии на кнопку Сохранить. Как я могу сделать это в JQuery?

Также я могу не знать, какие поля находятся после этого ярлыка. Это может быть что-нибудь текстовое, текстовое и т. Д. Можно ли найти, какой тег следует за меткой ??

Вот 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

(распространяясь на ответ Сандерсы)

Если вы использовали атрибут «for» для меток, то вы могли бы избавиться от идентификатора в div-обертках или всего 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
    });
});

Answer 2

$('#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 3

В дополнение к ответу sandersa, чтобы выполнить действие при нажатии кнопки, вы должны сделать что-то вроде этого:

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