对选定元素进行分组：document.querySelectorAll

Question

你好，如果我有这样的情况，我如何将我的 document.querySelectorAll 分组：

<div>
 <p class="flower">Flower 1</p>
 <p class="bee">Bee 1</p>
 <p class="tree"></p>
</div>

<div>
 <p class="flower">Flower 2</p>
 <p class="dude"></p>
 <p class="snow-leopard"></p>
</div>

<div>
 <p class="flower">Flower 3</p>
 <p class="tree"></p>
 <p class="mountain"></p>
 <p class="wizard"></p>
 <p class="bee">Bee 3</p>
</div>

我一直想要select花，如果有蜜蜂我想把它附在花上，其他的我都不在乎。花和蜜蜂在div中没有特定的顺序，也有没有蜜蜂的情况。还假设在花和蜜蜂处有一个 class，但结构的其余部分不像示例中那样干净。到目前为止，我唯一的解决方案是提高几个级别，然后使用正则表达式。最后我想将它们都包含在 json:

[{flower: "yellow", bee:"bumblebee"},...]

这种方法：

var flowers = document.querySelectorAll(flower);
var bees = document.querySelectorAll(bee);

之后对两个数组进行迭代是行不通的。

Answer 1

问题是您无法简单地使用 CSS 选择器将花朵与蜜蜂真正匹配起来。您需要遍历所有花朵并找到蜜蜂兄弟姐妹（如果有的话）。一种方法是获取一朵花的 parent，然后寻找蜜蜂。

var obj = Array.prototype.map.call(document.querySelectorAll(".flower"), function(f){
    var node = {flower: f.textContent};
    var bee = f.parentNode.querySelector(".bee");
    if (bee) {
        node.bee = bee.textContent;
    }
    return node;
});

对选定元素进行分组：document.querySelectorAll

Group Selected Elements: document.querySelectorAll

javascript

css-selectors

casperjs

selectors-api