如何使用 JS 计算类之间的子元素？答案

【问题标题】：How can I count the child elements in between a class, using JS?如何使用 JS 计算类之间的子元素？
【发布时间】：2019-07-26 20:10:28
【问题描述】：

是否有任何方法来计算类之间的元素：pic_1。输出应该是 3 和 2，因为有 3 个 tr td 元素，然后在类 2 之后。

除了包含图片的标签之外的所有 td 标签默认为 display:none。我想要，如果我点击第一张图片，它应该显示前 3 个 tds。（你好 1，你好 2，你好 3）如果我点击图片 2。它应该显示我（你好 1，你好 2），因为我可以使用 togle，但我如何计算，有多少元素在类：pic_1直到下一张照片。

<table>
    <tr>
        <td> <img src="" class="Pic_1">Picture1</td> 
    </tr>
    <tr>
        <td>hallo 1</td>
    </tr>
    <tr>
        <td>hallo 2</td>
    </tr>
    <tr>
        <td>hallo 3</td>
    </tr>
    <tr>
        <td> <img src="" class="Pic_2">Picture2</td> 
    </tr>
    <tr>
        <td>hallo 1</td>
    </tr>
    <tr>
        <td>hallo 2</td>
    </tr>
</table>

【问题讨论】：

欢迎来到 SO。这里的想法是你展示你尝试过的东西，解释什么不起作用，然后我们提供帮助。您的问题目前要求某人为您完成工作。
是的。到目前为止，您尝试过什么？
除了包含图片的标签之外的所有td标签默认为display:none。我想要，如果我点击第一张图片，它应该显示前 3 个 tds。（你好 1，你好 2，你好 3）如果我点击图片 2。它应该显示我（你好 1，你好 2）。
现在你只是重复了你想要的，你被要求告诉/展示你到目前为止尝试过的。请阅读How to Ask，然后相应地编辑您的问题。
你想要显示的元素不是“介于”其他元素与类之间，不是 DOM 意义上的。实现您想要的东西并非不可能——但这种 HTML 结构确实不太适合开始使用。问题是这是否应该首先是一张桌子。

标签： javascript html css

【解决方案1】：

您可以使用类来显示/隐藏特定元素的相关元素。假设给 hello 1/2/3 的类为 'Pic_1_relatives'，为 hello 1/2 的类为 'Pic_2_relatives'

现在点击 Pic_1 只显示 'Pic_1_relatives' -> display: block 和 'Pic_2_relatives' -> display: none;并在单击“Pic_2_relatives”时执行相同操作

【讨论】：