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) {

  ele.closest("tr").style.display="none";

})

<table>

  <tbody>

    <tr>

      <td>

        <div class="csLabel">

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

        </div>

      </td>

      <td>

        <div class="csFields">

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

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

          </select>

        </div>

      </td>

    </tr>

    <tr>

      <td>

        <div class="csLabel">

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

        </div>

      </td>

      <td>

        <div class="csFields">

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

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

          </select>

        </div>

      </td>

    </tr>

  </tbody>

</table>

如果标签和元素在不同的行中，您需要 ID 和 for=ID

var id = "common_id2";

[...document.querySelectorAll("#" + id + ", [for=" + id + "]")].forEach(function(ele) {

  ele.closest("tr").style.display = "none";

})

<table>

  <tbody>

    <tr>

      <td>

        <div class="csLabel">

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

        </div>

      </td>

    </tr>

    <tr>

      <td>

        <div class="csFields">

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

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

          </select>

        </div>

      </td>

    </tr>

    <tr>

      <td>

        <div class="csLabel">

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

        </div>

      </td>

    </tr>

    <tr>

      <td>

        <div class="csFields">

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

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

          </select>

        </div>

      </td>

    </tr>

  </tbody>

</table>

Answer 2

也许在加载时执行此操作，那么您稍后需要执行的操作会容易得多。

const child = document.querySelectorAll('label[for="common_id1"]')

child.forEach(node => node.parentNode.parentNode.data('targetId', node.id))