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>

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

有没有办法获取所有使用值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))

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

2 个答案: