2 
<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>

我正在使用 Sizzle Library 将这些数据从页面中取出。有 (n) 个可能的项目。

myVar = Sizzle('.item');

有没有办法将这些数据放入数组中

[0] itemid => 001
    itemname=> name 1


[1] itemid => 002
    itemname => name 2

我需要将每个项目放入一个数组中，而不使用 jQuery。而且我确实知道每个项目中 DIV 的名称

4

1 回答 1

2

使用 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]
于 2013-03-14T11:41:49.603 回答