如果至少选择了一个子元素，如何更改父元素的属性？

Question

I have a tree of nodes of type LayerNode . Where each node as children and parent reference.

I try to change property of parent if at least one child element has property selected = true .

  public recursiveSelectLayers(node: LayerNode) {
    if (node.children)
      node.children.forEach((childNode: LayerNode) => {
        childNode.parent = node;

        if (childNode?.parent?.selected)
          childNode.selected = childNode.parent.selected;

        if (childNode.selected && childNode.parent)
          childNode.parent.selected = childNode.selected;

        this.recursiveSelectLayers(childNode);
      });
  }

At the same time if parent is selected I need to set selected for all immediate children.

Problem is if one of children has selected the function above selects all children from last children to the root.

My second attempt:

  public recursiveSelectLayers(node: LayerNode) {
    if (node.parent && node.selected) node.parent.selected = node.selected;

    if (node.children) {
      node.children.forEach((childNode: LayerNode) => {
        if (node?.selected) childNode.selected = node.selected;
        childNode.parent = node;
        this.recursiveSelectLayers(childNode);
      });
    }
  }

Case 1:

Parent 1 (selected)
   Child 1
   Child 2
   Child 3 (selected)

Case 2:

   Parent 1 (selected)
       Child 1 (selected)
       Child 2 (selected)
       Child 3 (selected)

Case 3:

   Parent 1 (selected)
       Child 1
       Child 2
       Child 3 (selected)
           Child 3.1 (selected)

Editing:

  public recursiveSelectLayers(node: LayerNode) {
    if (node.id) this.flatlayers.set(node.id, node);
    if (node.children) {
      node.children.forEach(this.recursiveSelectLayers, this);
      node.selected =
        [...node.children].some((node) => node.selected) ||
        node?.parent?.selected;
    }
  }

Answer 1

I try this... but I'm testing it. Passed 4 cases.

 function recursiveSelectLayers(node) { if (node.children) { node.children.forEach((childNode) => { if (node.parent && node.selected) { node.parent.selected = true; } recursiveSelectLayers(childNode); }); } if (node.parent && node.parent.selected) { node.selected = true; } return node } // tests: var case1 = { selected: true, children: [{}, {}, { selected: true }] } case1.children[0].parent = case1; case1.children[1].parent = case1; case1.children[2].parent = case1; var case2 = { selected: true, children: [{ selected: true }, { selected: true }, { selected: true }] } case2.children[0].parent = case2; case2.children[1].parent = case2; case2.children[2].parent = case2; var case3 = { selected: true, children: [{}, {}, { selected: true, children: [{ selected: true }] }] } case3.children[0].parent = case3; case3.children[1].parent = case3; case3.children[2].parent = case3; case3.children[2].children[0].parent = case3.children[2]; var case4 = { children: [{}, {}, { selected: true, children: [{}] }] } case4.children[0].parent = case4; case4.children[1].parent = case4; case4.children[2].parent = case4; case4.children[2].children[0].parent = case4.children[2]; console.log(recursiveSelectLayers(case1)) console.log(recursiveSelectLayers(case2)) console.log(recursiveSelectLayers(case3)) console.log(recursiveSelectLayers(case4))

 <pre> Case1: Parent 1 (selected) Child 1 Child 2 Child 3 (selected) Case 2: Parent 1 (selected) Child 1 (selected) Child 2 (selected) Child 3 (selected) Case 3: Parent 1 (selected) Child 1 Child 2 Child 3 (selected) Child 3.1 (selected) Case 4: Parent 1 Child 1 Child 2 Child 3 (selected) Child 3.1 </pre>