篩選輸入標記的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對象

回答

相關問題