JavaScript，获取具有相同值 'id' 和其他属性的元素

Question

我有一个呈现为以下结构的文档：

<tr>

    <td>

        <div class="csLabel">

            <label for="common_id">Label</label>

        </div>

    </td>

    <td>

        <div class="csFields">

            <select id="common_id" name="someName">

                <option value="">some options...</option>

            </select>           

        </div>

    </td>

</tr>

页面上有很多这样的元素，我只想隐藏其中的几个。如您所见，有两个元素： alabel和select。它们共享相同的值，common_id但在label其中分配给for属性，并且在select其中是id。

有没有办法获得所有使用 value 的元素common_id？

Answer 1

试试这个如果您只想隐藏该行，您只需要 ID：var id = "common_id2";[...document.querySelectorAll("#"+id)].forEach(function(ele) {&nbsp; ele.closest("tr").style.display="none";})<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csLabel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="common_id1">Label</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csFields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="common_id1" name="someName">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">some options...</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csLabel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="common_id2">Label</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csFields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="common_id2" name="someName">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">some options...</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>如果标签和元素在不同的行中，您需要 ID 和 for=IDvar id = "common_id2";[...document.querySelectorAll("#" + id + ", [for=" + id + "]")].forEach(function(ele) {&nbsp; ele.closest("tr").style.display = "none";})<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csLabel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="common_id1">Label</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csFields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="common_id1" name="someName">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">some options...</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csLabel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="common_id2">Label</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <div class="csFields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="common_id2" name="someName">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">some options...</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

也许在加载时执行此操作，那么您稍后需要执行的操作会容易得多。const child = document.querySelectorAll('label[for="common_id1"]')child.forEach(node => node.parentNode.parentNode.data('targetId', node.id))