如何找到最接近输入的标签？答案

【问题标题】：How to find the closest label to an input?如何找到最接近输入的标签？
【发布时间】：2020-10-14 20:22:49
【问题描述】：

我有几个inputs，上面有一个label。我想为每个人找到最接近的label。问题是一些inputs 上面没有直接的label。

最初我有这个：

let el = document.querySelector(`label[for="${this.element.id}"]`)

这适用于所有情况，除了一些罕见的情况，我在一行中有两个 inputs，例如 test 和 test2。我怎样才能得到test label 的test2 input？

<div>
      <label for="test">Interval</label><br>
      <input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
      <input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">

      <label for="limit">Limit</label><br>
      <input id="limit" step="1" type="number">
</div>

【问题讨论】：

看到这个stackoverflow.com/questions/9004307/…。你不应该使用带有 2 个输入的单个标签
我知道，但我想获得最接近的标签的唯一原因就是在它上面附加一个图标。所以我没有为 2 个输入使用 1 个标签，只需要它来显示待处理的呼叫状态@OvidiuDolha
@OvidiuDolha 您的链接是有效的，但是情况似乎有所不同，因为这里的标签没有包裹在输入周围。从技术上讲，OP 的代码在语义上是正确的，并且标签仅通过其 id 与一个输入相关联
@HeelMega 我们可以假设正确的诽谤总是位于输入之前吗？如果是这样，也许你应该改写你的标题，在你的例子中，你想要的标签不是最接近的（它是下面的）
@Kaddath 是的，绝对

标签： javascript html dom css-selectors

【解决方案1】：

您可以像这样使用一点手动 DOM 遍历来找到 DOM 中最近的父标签元素：

function nearestParentLabel(inputId) {
  let input = document.getElementById(inputId);
  let label = input.previousSibling;
  while (label != null && label.tagName != "LABEL") {
    label = label.previousSibling;
  }
  return label;
}

console.log(
  nearestParentLabel("test"), // returns "test" label
  nearestParentLabel("test2"), // returns "test" label
  nearestParentLabel("limit"), // returns "limit" label
);

<div>
      <label for="test">Interval</label><br>
      <input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
      <input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">

      <label for="limit">Limit</label><br>
      <input id="limit" step="1" type="number">
</div>

【讨论】：

【解决方案2】：

您可以为此使用aria-labelledby 属性。 aria-labelledby 属性建立对象及其标签之间的关系，其值应为一个或多个元素 ID。

在这里，我们可以假设 test2 实际上是您在代码中所拥有的，例如 this.element.id。使用它，我们可以使用getAttribute() 方法获取aria-labelledby 属性值。然后我们可以简单地将其传递给document.querySelector 以获取与输入 id 最接近的标签。

let input = document.querySelector(`#test2`)
let labelId = input.getAttribute('aria-labelledby')

let el1 = document.querySelector(`label[id="${labelId}"]`)
el1.style.color = "green"

<div>
  <label id="interval">Interval</label><br>
  <input min="0.1" id="test" placeholder="Min" step="0.1" type="number" aria-labelledby="interval">
  <input min="0.1" id="test2" placeholder="Max" step="0.1" type="number" aria-labelledby="interval">
</div>

【讨论】：

【解决方案3】：

我为你做了一个函数searchLabel！

function searchLabel(inputElem) {
  var elem = inputElem;
  while (true) {
    if (elem.tagName == "LABEL") {
      break;
    }
    if (elem == null) {
      break;
    }
    elem = elem.previousSibling;
  }
  return elem;
}
console.log(searchLabel(document.getElementById("test2")));

<div id="myDiv">
  <label for="test">Interval</label><br>
  <input min="0.1" id="test" placeholder="Min" step="0.1" type="number">
  <input min="0.1" id="test2" placeholder="Max" step="0.1" type="number">

  <label for="limit">Limit</label><br>
  <input id="limit" step="1" type="number">
</div>

【讨论】：