javascript - 如何在javascript中获取所有标签及其输入元素

Question

我想使用 Javascript 获取所有标签及其输入元素。我还有单选、复选框和文本区域元素。然后我想把它放在一个对象数组中。

这就是我所做的，

var html = data;
var array = [];
for(var i=0;i<$("input").length;i++){
    array[i] = {label:"",val:$("input").eq(i).val()};
}
console.log(array);

顺便说一句，没有 for 属性，而且它们的下一个兄弟元素并不总是 input/radio/checkbox/textarea 元素。有时，结构是，

<label>Something:</label><Br/ ><input type="text" />

在这种情况下我该如何做我想做的事？

Answer 1

您可以使用map()方法生成数组并使用 prevAll() jQuery 方法 :first伪类选择器来获取标签(不能使用 prev() 方法，因为中间有一个 br 标签)。

var array = $("input").map(function(){
  return { 
    label : $(this).prevAll('label:first').text(),
    val:$(this).val()
  };
}).get();

console.log(array);

<小时/>

仅供引用:如果在某些情况下输入被标签包裹，那么您可以使用 closest()方法来获取包装元素。虽然您可以使用 :input选择所有表单元素。

var array = $(":input").map(function() {
  return {
    label: $(this).prevAll('label:first').text(),
    val: $(this).val()
  };
}).get();

console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some</label>
<Br/>
<input type="text" value="1" />
<label>Some1</label>
<Br/>
<input type="text" value="11" />
<label>Some2</label>
<Br/>
<input type="text" value="2" />
<label>Some3</label>
<Br/>
<input type="text" value="4" />
<label>Some4</label>
<Br/>
<input type="text" value="3" />

<label>Some422</label>
<Br/>
<select><option value="1"></option><select>