Sizzle ライブラリを依存関係として使用すると、次のようにすべての<div class="item">
親が反復処理され、次に各親のすべての子が反復処理されます。
<script type='text/javascript' src='https://raw.github.com/jquery/sizzle/master/sizzle.js'></script>
<script type='text/javascript'>
var itemDivs = Sizzle('.item')
var items = []
for (var i = 0; i < itemDivs.length; i++) {
var children = Sizzle('div', itemDivs[i])
var item = {}
for (var j = 0; j < children.length; j++) {
item[children[j].id] = children[j].innerText || children[j].textContent
}
items.push(item)
}
console.log(items)
</script>
他の要素がある場合HTML
、上記のコードを変更して、配列に必要な特定の子のみを見つける必要があります。これがテストされた HTML は次のとおりです。
<div class="item">
<div id="itemid">001</div>
<div id="itemname">name 1</div>
</div>
<div class="item">
<div id="itemid">002</div>
<div id="itemname">name 2</div>
</div>
Chrome DevTools コンソールで得られる出力は
[Object, Object]
0: Object
itemid: "001"
itemname: "name 1"
__proto__: Object
1: Object
itemid: "002"
itemname: "name 2"
__proto__: Object
length: 2
__proto__: Array[0]