如何判断点击的.seat-row元素位于.exit-row的上方、下方还是中间？

我有如下HTML结构：

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>
<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="exit-row"><div class="exit-title">Exit</div></div>
</div>
<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div><div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

<div class="seat-row">
    <div class="seat-row-inner">
        <div class="seat-group">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias, aliquid, asperiores atque autem
        </div>
    </div>
</div>

需求：判断点击的.seat-row元素处于.exit-row的「上方」「下方」还是「中间」位置，必须用原生JavaScript实现，禁止使用jQuery或其他库。此前尝试过给.seat-row加编号类、给.exit-row的父级.seat-row加exit-door类并拆分，但需要更可靠的实现方案。

核心逻辑是先收集所有座位行和出口行的位置索引，点击时通过对比索引范围判断位置：

// 获取所有座位行元素
const seatRows = document.querySelectorAll('.seat-row');
// 收集所有出口行的索引
const exitRowIndices = [];

// 遍历座位行，记录出口行的索引
seatRows.forEach((row, index) => {
    if (row.querySelector('.exit-row')) {
        exitRowIndices.push(index);
    }
});

// 为每个座位行绑定点击事件
seatRows.forEach((row, currentIndex) => {
    row.addEventListener('click', () => {
        let position = '';
        const minExitIndex = Math.min(...exitRowIndices);
        const maxExitIndex = Math.max(...exitRowIndices);

        if (currentIndex < minExitIndex) {
            position = '上方';
        } else if (currentIndex > maxExitIndex) {
            position = '下方';
        } else {
            // 处于出口行之间或出口行本身
            position = '中间';
        }

        // 这里可以替换成你的业务逻辑，比如打印结果或更新UI
        console.log(`当前行处于出口的${position}`);
    });
});

逻辑说明 #

1. 收集索引：遍历所有.seat-row，检查子元素是否包含.exit-row，如果是则记录该行的索引到exitRowIndices数组。
2. 绑定点击事件：给每个座位行添加点击监听，点击时获取当前行的索引。
3. 判断位置：
   • 当前行索引小于最小出口行索引 → 上方
   • 当前行索引大于最大出口行索引 → 下方
   • 其余情况（包括点击出口行本身、处于两个出口行之间）→ 中间

这个方案无需额外修改HTML结构，直接通过DOM查询和索引对比实现，逻辑清晰且可靠。

内容的提问来源于stack exchange，提问作者İbrahim Yılmaz