Сгруппировать выбранные элементы: 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;
});