Question

<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的名称

Answer 1

将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]

使用Sizzle和JS将div转换为数组

1 个答案: