jQuery设置标签属性

Question

是否可以使用jQuery设置“for”（AssociatedControlID）属性？我正在尝试像这样将其设置为标签后出现的下一个控件：

$('label.asssociateClass').each(function()
{

      var toAssociate = $(this).next(':input');

      $(this).attr("for", toAssociate.attr("id"));

});

问题在于如果我不通过AssociatedControlID将其设置在服务器上，由于在这种情况下它以而不是呈现，因此它永远不会到达这里。是否有一种方法可以克服这个问题，或者我必须在服务器上执行此操作？

- Victor

Answer 1

您可以使用.replaceWith()将替换为，如下所示:

$('span.asssociateClass').each(function() {
  var l = $("<label class='associateClass' />")
           .html($(this).html())
           .attr('for', $(this).next(":input").attr("id"));
  $(this).replaceWith(l);
});​

这是一个快速运行的例子： http://jsfiddle.net/V73WL/

- Nick Craver

---

谢谢回复。我应该在document.ready中完成它，还是那时已经太晚了？ - Victor

@Nick 奇怪的是，它似乎正在工作，但HTML仍然显示旧元素（在此情况下为spans，而不是新标签）。 - Victor

@Nick - 这是正确的。 我有一个 <asp:Label runat="server" CssClass="associateClass">，它呈现为spans。 - Victor

@Nick 我的整个代码片段如下所示： $(document).ready(function() { $('span.invisibleAccess').each(function() { var l = $("<label class='associateClass' />") .html($(this).html()) .attr('for', $(this).next(":input").attr("id")); $(this).replaceWith(l); $(this).css({ "width": "0", "height": "0", "overflow": "hidden", "position": "absolute" }); }); }); - Victor

@VictorS - 你的元素有associateClass类，但是你改变了我发布的选择器来查找invisibleAccess...它不会找到任何匹配项，因为你的span拥有的内容和你更改后要查找的内容不匹配，明白吗？如果你想让new标签具有invisibleAccess类，则交换你代码片段中这两个类出现的位置。 - Nick Craver

Answer 2

你无法更改 asp:label 的行为，但是你可以使用 jQuery 更改标签。

$(function () {
    var spans = $('span.label').each(function() {
        input = $(this).next('input');      
        $('<label />').html($(this).html()).attr('for', input.attr('id')).insertBefore(input);
        $(this).remove();
    });
});

- vittore

---

谢谢回复。看起来我需要两个步骤 - 将标签从“span”更改为“label”，然后向“label”添加“for”属性？ - Victor

几乎完成。删除 span，插入 label，为 label 设置 for。 - vittore

你为什么不想在服务器端完成这个任务呢？ - vittore

这个功能在许多页面中都被使用，所以不要在每个页面上实现它，只需为此标签设置一个皮肤并在整个网站中使用即可。 - Victor

如果需要在新创建的标签上设置其他属性怎么办？ - Victor