Question

我试图谷歌，但失败了。

我希望具有ID的元素相对于例如其父级而不是文档本身是唯一的。有没有办法做到这一点？

好的，因为你需要一个例子。我有一个庞大的形式，有大量的单选按钮和输入，例如：2个带ID的单选按钮。每个都有标签。

<input type="radio" id="foo" name="name">
<label for="foo">Never</label>

<input type="radio" id="bar" name="name">
<label for="bar">Daily</label>

我无法更改此设置。

我有一个克隆（通过.clone()）此表单的按钮。

正如您可能猜到的那样，它都会中断，因为ID和标签不是唯一的。

Answer 1

编辑 ：OP在我的回答后完全改变了他的问题。在假设我不在主题

之前，请查看编辑历史记录

如果您想对多个项目使用相同的ID，则需要使用一个类。您可以在特定父节点中定位类。例如，在jQuery中：

var elem = $('.parentClass .childClass');

这将仅针对.childClass的子项.childClass。您可以通过更改CSS选择器中的父元素来选择具有不同父元素的.childClass的其他实例。

var eleme = $('.otherParentClass .childClass');

Answer 2

无线电输入可以放在标签内。使用此设置，您无需使用id来匹配标签的for，并且标签将按预期工作（单击它可激活无线电输入）。这使您无需创建唯一的for-id对。

<label>
  Here's teh label
  <input type="radio" name="foo">
</label>

<label>
  Here's another label
  <input type="radio" name="foo">
</label>

Answer 3

以下只是一个带有一些工作代码的算法的建议，关于如何确定插入克隆元素的位置的问题缺少逻辑。我已经修改了控件的名称，因为为控件命名 name 会掩盖表单自己的 name 属性。

id是根据表单中具有相同名称的控件数生成的。也许你还有其他一些算法。

function cloneRadio(control) {

  // Create a document fragment for convenience
  var frag = document.createDocumentFragment();

  // Clone the control and add to fragment
  var el = frag.appendChild(control.cloneNode());

  // Get all the controls in the form with the same name
  var controls = control.form[control.name];

  // Give the new control an id of name + control count
  el.id = control.name + controls.length;

  // Add a label
  var label = frag.appendChild(document.createElement('label'));

  // Add text in label
  label.appendChild(document.createTextNode('for ' + el.id));

  // Link label to element
  label.htmlFor = el.id;

  // Add to end of form
  control.form.appendChild(frag);
}

这假设你没有移除任何元素，如果你这样做会弄乱编号。我只是把克隆元素放在表单的末尾，你需要一些方法来解决它的位置，但是这里没有提到它。

一些相关的HTML：

<form>
  <input type="button" value="clone foo" 
   onclick="cloneRadio(this.form.controlName[0]);">
  <br>
  <input type="radio" id="foo" name="controlName">
  <label for="foo">Never</label>
  <br>
  <input type="radio" id="bar" name="controlName">
  <label for="bar">Daily</label>
</form>

有没有办法让ID对页面上的任何元素都是唯一的，而不是文档

3 个答案: