无法在 Table 中获得第一个兄弟姐妹

Question

我想为我的所有元素兄弟姐妹添加一个 class。除了我单击的第一个元素外，我设法对所有元素都执行了此操作。

我想得到我所有的兄弟姐妹。有没有人能赐教一下？

谢谢

参见下面的 HTML & JS:

    <table>
<thead>
    <tr>
        <th>one</th>
        <th>two</th>
        <th>three</th>
        <th>four</th>
    </tr>
</thead>

<tr id="first">
    <td>row11</td>
    <td>row12</td>
    <td>row13</td>
    <td>row14</td>
</tr>
<tr>
    <td>row21</td>
    <td>row22</td>
    <td>row23</td>
    <td>row24</td>
</tr>
<tr>
    <td>row31</td>
    <td>row32</td>
    <td>row33</td>
    <td>row34</td>
</tr>
<tr>
    <td>row41</td>
    <td>row42</td>
    <td>row43</td>
    <td>row44</td>
</tr>
</table>

document.querySelectorAll("#first").forEach(element => {
    let childs = element.children;
    
    for (allChildren of childs) {
        allChildren.addEventListener("click", function() {
            let current = allChildren.parentElement;
            let nextSibling = current.nextSibling.nextElementSibling;
            
            while(nextSibling) {
                nextSibling = nextSibling.nextElementSibling;
                console.log(nextSibling);
                nextSibling.classList.add("added_test")
            }
        })
    }
});

点击第一行时的控制台输出。

Answer 1

能发一下写在点击事件上的代码吗？为了更好地理解问题

Answer 2

看来你得到了两次下一个兄弟姐妹。将第二个下一个兄弟行放在 while 循环的最后。

无法在 Table 中获得第一个兄弟姐妹

Cannot get First SIbling in Table

html

javascript

nextsibling