筛选输入标记的dom对象

我从当前呈现的服务器端的表单构建一个对象。我收集下图中显示的所有复选框，并试图按照每个步骤（1,2,3等）下的所有复选框是基于属性parentNode的单个对象进行排序。筛选输入标记的dom对象

当前document.querySelectorAll('.checkboxes')以下列格式获取所有复选框。

var newObj = [ 
    { 
     name: 'one', 
     parentNode: { 
     id: 'stepOne' 
     } 
    }, 
    { 
     name: 'two', 
     parentNode: { 
     id: 'stepTwo' 
     } 
    }, 
    { 
     name: 'three', 
     parentNode: { 
     id: 'stepOne' 
     } 
    }, 
]

新的对象应该是：

var newObj = { 
    stepOne: [ 
     { 
     name: 'one', 
     parentNode: { 
      id: 'stepOne' 
     } 
     }, 
     { 
     name: 'three', 
     parentNode: { 
      id: 'stepOne' 
     } 
     }, 
    ], 
    stepTwo: [ 
     { 
     name: 'two', 
     parentNode: { 
      id: 'stepTwo' 
     } 
     }, 
    ] 
}

通常我做这样的事情：

let stepOne = function(step) { 
    return step.parentNode.getAttribute('id') === 'stepOne'; 
} 

let stepTwo = function(step) { 
    return step.parentNode.getAttribute('id') === 'stepTwo'; 
} 

let allTheStepOnes = fetchCheckBoxes.filter(stepOne);

但过滤器不DOM对象上工作，这似乎效率不高也是如此。

来源

2017-06-05 AnAspiringCanadian

使用reduce我们可以减少将当前数组放入新结构中。

return newObj.reduce(function(acc, item) {

如果之前已经定义了acc[item.parentNode.id]，那么检索它。否则，将其设置为空数组：

acc[item.parentNode.id] = (acc[item.parentNode.id] || [])

添加item到数组，然后返回它：

acc[item.parentNode.id].push(item); 
return acc;

我们设定的蓄电池为{}开始。

显示工作的片段。

var newObj = [{ 
 
    name: 'one', 
 
    parentNode: { 
 
    id: 'stepOne' 
 
    } 
 
}, { 
 
    name: 'two', 
 
    parentNode: { 
 
    id: 'stepTwo' 
 
    } 
 
}, { 
 
    name: 'three', 
 
    parentNode: { 
 
    id: 'stepOne' 
 
    } 
 
}, ]; 
 

 
var newOrder = function(prevList) { 
 
     return prevList.reduce(function(acc, item) { 
 
      acc[item.parentNode.id] = (acc[item.parentNode.id] || []) 
 
      acc[item.parentNode.id].push(item); 
 
      return acc; 
 
     }, {}); 
 
    } 
 
    
 
console.log(newOrder(newObj));

来源

2017-06-05 22:31:22 user2340824

是否有通过newOrder对象的方式来循环？我需要遍历结果并仅提取一些数据。 – AnAspiringCanadian

'newOrder'是一个匿名函数。您可以将其用作常规功能，例如'var myNewList = newOrder（newObj）'。然后你可以遍历'myNewList' – user2340824

这个功能应该做的伎俩

function mapObj(obj) { 
    var result = {}; 
    for(var i = 0; i < obj.length; i++) { 
     var e = obj[i]; 
     result[e.parentNode.id] = result[e.parentNode.id] || []; 
     result[e.parentNode.id].push(e); 
    } 
    return result; 
}

来源

2017-06-05 22:24:29

这样做的正确的方法是一个forEach回路，并使用这样的关联数组：

let newObject = {}; 

originalObject.forEach((item)=>{ 
    let step = item.parentNode.id 
    if (newObj[step] === undefined) { 
     newObj[step] = [] 
    } 
    newObj[step].push(item) 
})

来源

2017-06-05 22:25:54

筛选输入标记的dom对象

回答

相关问题