遍历子节点取值的问题

Question

<div id="one">
    <div><span>A</span><input name="optionscontent" type="text" style="width:200px"/><input name="right" type="radio"/></div>
    <div><span>B</span><input name="optionscontent" type="text" style="width:200px"/><input name="right" type="radio"/></div>
    <div><span>C</span><input name="optionscontent" type="text" style="width:200px"/><input name="right" type="radio"/></div>
</div>

想要取到id为one的div下的子节点,并将该子节点的子节点span,input,radio的值存入数组的一条记录，要如何实现？

Answer 1

var divEles = document.getElementById('one').children,
    list = [];

for (var i = 0, len = divEles.length; i < len; i++) {
  var obj = {};
  obj.text = divEles[i].firstChild.textContent;
  obj.optionscontent = divEles[i].getElementsByTagName('input')[0].value;
  obj.right = divEles[i].getElementsByTagName('input')[1].value;
  list.push(obj);
}

Answer 2

$('#one>div').each(function(i,item){
    //这里面去获取
});

Answer 3

var arr = [];
$('#one>div').each(function(){
    var o = {
        span: $(this).find('span').text(),
        input: $(this).find('input[name="optionscontent"]').val(),
        radio: $(this).find('input[name="right"]').val()
    }
    arr.push(o);
});
console.log(arr);