javascript - 查找连续元素并将所有周围的 div 分组

Question

你好，

假设我有 4 个盒子，它们之间有 3 个运算符 (AND|OR)。每次在 AND|OR 之间切换时，如果两个运算符具有相同的连续值，我需要根据规则将框和运算符组合在一起。

一些需要组的随机场景：

[B1 AND B2 AND B3] OR B4（图片示例）
B1 OR [B2 AND B3 AND B4]
B1 AND [B2 OR B3 OR B4]

如果我有 5 个带有不同且连续的运算符的盒子，它应该优先考虑并仅包装第一组运算符。例如：[B1 OR B2 OR B3] AND B4 AND B5。

到目前为止，这是我的代码，但无法正常工作，尤其是在查找连续运算符时。例如：[B1 OR B2 OR B3] AND B4 AND B5

HTML：

<div class="container-section">
    <div class="box">box1</div>
    <div class="and-or" data-operator="0">AND</div>
</div>

<div class="container-section">
    <div class="box">box2</div>
    <div class="and-or" data-operator="0">AND</div>
</div>

<div class="container-section">
    <div class="box">box3</div>
    <div class="and-or" data-operator="1">OR</div>
</div>

<div class="container-section">
    <div class="box">box4</div>
</div>

JS：

function groupBoxes() {

    //find all operators,
    let operators = $('.and-or');

    //reset all groups
    $('.container-section').removeClass('hasGroup');
    $('.group-blue-line > .container-section').unwrap();

    //trying to find consecutive operators
    //foreach operator I am trying to look up and down to siblings value

    operators.each(function(index, element) {
        let currentOperator = $(element);
        let prevOperator = $(operators[index - 1]);
        let nextOperator = $(operators[index + 1]);
        let prevBox = $(element).closest('.container-section').prev();
        let nextBox = $(element).closest('.container-section').next();

        if (prevOperator && currentOperator.data('operator') == prevOperator.data('operator')) {
            prevBox.addClass('hasGroup');
        }

        if (nextOperator && currentOperator.data('operator') == nextOperator.data('operator')) {
            nextBox.addClass('hasGroup');
        }
    });
    $('.hasGroup').wrapAll('<div class="group-blue-line"></div>');
}

标签： javascriptjqueryarraysalgorithmgrouping