Question

我的表单包含5到6个文本字段形式的电话字段。所有这些电话领域都有一个共同的类“电话类”。因此，我需要迭代所有这些电话字段并获取单个文本字段（区号，本地3和本地4）的值，一旦我有这些值，我必须验证这些值中的每一个。我创造了一个小提琴供参考。我必须只使用phoneClass来获取文本字段的值。在不使用单个字段id的情况下，我需要使用phoneClass获取这3个文本字段的值，然后我可以将其放入数组中然后对其进行操作。任何人都可以帮助我如何做到这一点？

http://jsfiddle.net/jUQYr/79/

<div class="phoneclass">
<label for="owner_phone">Owner Phone:</label>
<div class="input-phone">
  <input type="text" id="owner_area_code" name="owner_area_code" minlength="3" maxlength="3" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">-</span>
  <input type="text" id="owner_local3" name="owner_local3" minlength="3" maxlength="3" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">-</span>
  <input  type="text" id="owner_local4" name="owner_local4" minlength="4" maxlength="4" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">Ext.</span>
  <input  type="text" id="owner_extn" name="owner_extn" maxlength="5" style="width: 40px"/>
  <input type="hidden" id="owner_phone" />
</div>
</div>
    <hr/>
    <div class="phoneclass">
    <label for="owner_phone1">Owner Phone1:</label>
<div class="input-phone">
  <input type="text" id="owner_area_code1" name="owner_area_code1" minlength="3" maxlength="3" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">-</span>
  <input type="text" id="owner_local31" name="owner_local31" minlength="3" maxlength="3" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">-</span>
  <input  type="text" id="owner_local41" name="owner_local41" minlength="4" maxlength="4" title="Owner number has either been left blank or the data entered was invalid" style="width: 60px" />
  <span class="inline-text">Ext.</span>
  <input  type="text" id="owner_extn1" name="owner_extn1" maxlength="5" style="width: 40px"/>
  <input type="hidden" id="owner_phone1" />
</div>
</div>
<div>
    <input type="submit" id="submitBtn"/>
</div>

提前致谢...

Answer 1

尝试

1）循环遍历每个元素，类名为 phoneclass 。

2）在每个包含phoneclass类的div中，选择使用 find() 方法迭代他们的孩子。

 $('.phoneclass').each(function () {
        $(this).find('input').each(function (index, value) {
            console.log($(value).val());
        });
    });

JSFiddle

Answer 2

试试这个。

for(i=0;i<$('.phoneclass').length;i++){
    phoneArray=[]; // store the values
    $('.phoneclass').eq(i).find('input:visible').each(function(index, element) {
        phoneArray.push($(this).val());
    });

    phoneObject = {}; // store the phone number
    phoneObject.areaCode = phoneArray[0];
    phoneObject.local3 = phoneArray[1];
    phoneObject.local4 = phoneArray[2];
    phoneObject.ext = phoneArray[3];
    alert("Phone"+phoneObject.areaCode+phoneObject.local3+phoneObject.local4);
    phoneNumbers.push(phoneObject); // Array of phone numbers
}

Fiddle

再一次。

var phoneNumbers = [];
$('.phoneclass').each(function(index, element) {
    phoneArray=[]; // store the values
    $(this).find('input:visible').each(function(index, element) {
        phoneArray.push($(this).val());
    });

    phoneObject = {}; // store the phone number
    phoneObject.areaCode = phoneArray[0];
    phoneObject.local3 = phoneArray[1];
    phoneObject.local4 = phoneArray[2];
    phoneObject.ext = phoneArray[3];
    alert("Phone"+phoneObject.areaCode+phoneObject.local3+phoneObject.local4);
    phoneNumbers.push(phoneObject); // Array of phone numbers

});

Fiddle

循环通过输入类型文本jquery的电话字段

2 个答案:

JSFiddle