获取特定部分中的所有元素

Question

我有以下 html 结构：

<div>    
    <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
      <div>
         <div><div class="EmptyDiv"></div><button   onClick={onAddClick} id="RequestNewOrgBtn_prefix-1" class="ui primary button">Request New External Org</button><div></div></div>
      </div>

      <div>
        <div><div class="EmptyDiv"></div><button   onClick={onAddClick} id="RequestNewOrgBtn_prefix-2" class="ui primary button">Request New External Org</button><div></div></div>
      </div>
    </div>

    <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
    <div>
        <div><div class="EmptyDiv"></div><button   onClick={onAddClick} id="RequestNewOrgBtn_prefix-3" class="ui primary button">Request New External Org</button><div></div></div>
    </div>

    <div>
        <div><div class="EmptyDiv"></div><button   onClick={onAddClick} id="RequestNewOrgBtn_prefix-4" class="ui primary button">Request New External Org</button><div></div></div>
    </div>
    </div>
</div>

当我点击一个特定的按钮时，它会执行下面的函数，该函数给出上面 html 中以“RequestNewOrgBtn”开头的所有元素的选定索引，但是我想检索 div 类“flw__panel__col--12 flw__container__col--”中的元素的索引12 formSection__col--12"，但该类不是唯一的，它很常见。由于父 div 的类相同，我无法弄清楚如何通过父 div 做到这一点？

    const onAddClick = (e: any) => {
            // find index of selected elememt
            let cusid_ele = document.querySelectorAll("[id^=RequestNewOrgBtn]");
            const selectedElementId = e.target.id;
            for (let i = 0; i < cusid_ele.length; i++){
                if( cusid_ele[i].getAttribute("id") === selectedElementId){
                    setSelectedIndex(i);
                }
            }
        };

Answer 1

您可以尝试下面的代码片段，它会获取最近父级中的所有按钮，并为您提供从其 id 中提取的这些按钮的索引。

const onAddClick = (e) => {
      console.log(
      Array.from(
        e.target.closest(".flw__panel__col--12.flw__container__col--12.formSection__col--12")
        .querySelectorAll("[id^=RequestNewOrgBtn]"))
        .map(a=>a.id.split('').pop()))
    };

Answer 2

希望我理解你的问题。似乎每个类下都存储了 2 个 div，因此您可以假设偶数始终是后一个索引，而奇数是前一个：

function onAddClick(e) {
    const indexGroup = [];
    const currentIndex = Number(e?.id.slice(-1));
    console.log(`CURRENT INDEX: `, currentIndex);
    if (currentIndex % 2) {
        // odd number (first)
        indexGroup.push(currentIndex, currentIndex + 1);
    } else {
        // even number (last)
        indexGroup.push(currentIndex - 1, currentIndex);
    }
    console.log(`GROUP OF INDEXES: `, indexGroup);
    return indexGroup;
};

    <div>
        <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
            <div>
                <div>
                    <div class="EmptyDiv"></div><button onClick={onAddClick(this)} id="RequestNewOrgBtn_prefix-1"
                        class="ui primary button">Request New External Org</button>
                    <div></div>
                </div>
            </div>

            <div>
                <div>
                    <div class="EmptyDiv"></div><button onClick={onAddClick(this)} id="RequestNewOrgBtn_prefix-2"
                        class="ui primary button">Request New External Org</button>
                    <div></div>
                </div>
            </div>
        </div>

        <div class="flw__panel__col--12 flw__container__col--12 formSection__col--12">
            <div>
                <div>
                    <div class="EmptyDiv"></div><button onClick={onAddClick(this)} id="RequestNewOrgBtn_prefix-3"
                        class="ui primary button">Request New External Org</button>
                    <div></div>
                </div>
            </div>

            <div>
                <div>
                    <div class="EmptyDiv"></div><button onClick={onAddClick(this)} id="RequestNewOrgBtn_prefix-4"
                        class="ui primary button">Request New External Org</button>
                    <div></div>
                </div>
            </div>
        </div>
    </div>