组选定元素: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>

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

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

这种方法:

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

然后在两个阵列上进行迭代不起作用.

Answer 1

问题是你不能简单地用CSS选择器将花与蜜蜂匹配.您需要遍历所有花朵并找到蜜蜂兄弟姐妹(如果有的话).一种方法是获得一朵花的父母,然后寻找蜜蜂.

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;
});