組選定元素：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;
});