jQuery - 添加 ID 而不是类

Posted 2023-02-21

【中文标题】jQuery - 添加 ID 而不是类

【英文标题】：jQuery - Add ID instead of Class

【发布时间】：2011-01-11 17:30:36

【问题描述】：

我正在使用当前的jQuery：

$(function() 
    $('span .breadcrumb').each(function()
        $('#nav').addClass($(this).text());
        $('#container').addClass($(this).text());
        $('.stretch_footer').addClass($(this).text())
        $('#footer').addClass($(this).text());
    );
);

它将面包屑中的文本应用到页面上的 4 个元素，允许我专门为那里的页面设置样式。

我想尝试添加 ID 而不是类，我该如何实现？

【问题讨论】：

ID 必须是唯一的才能成为有效的 Xhtml。 ID 必须符合更严格的规则，例如，不能有空格，以字母或 _ 开头，只能包含字母、数字或有限数量的其他字符。

@Peter：添加***的链接似乎有点多余。

Adding attribute in jQuery的可能重复

另见addID in jQuery?

在这样做时，您还必须为 DOM 中的每个元素使用唯一的 id，否则会产生无效的 HTML developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

【参考方案1】：

试试这个：

$('element').attr('id', 'value');

原来如此；

$(function() 
    $('span .breadcrumb').each(function()
        $('#nav').attr('id', $(this).text());
        $('#container').attr('id', $(this).text());
        $('.stretch_footer').attr('id', $(this).text())
        $('#footer').attr('id', $(this).text());
    );
);

因此，您正在更改/覆盖三个元素的 id 并将一个 id 添加到一个元素。 您可以根据需要进行修改...

【讨论】：

缓存怎么样？而不是制作“this”的 4 个不同的 jQuery 对象。 var text = $(this).text();

@petersendidt：同意，我在回答中说过，他需要根据需要进行修改。

更好：$('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text()); .. 并不是说​​在这里使用 ID 是个好主意。

这只会工作一次，之后 ID 会发生变化......而且，你会继续覆盖相同的 ID，所以你最好为$('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())（或last，@ 987654326@)。无论如何，这很奇怪。

这会创建多个具有相同 ID 的元素，这是无效的 HTML

【参考方案2】：

请记住，这会覆盖元素已有的任何 ID：

 $(".element").attr("id","SomeID");

addClass 存在的原因是因为一个元素可以有多个类，所以你不必覆盖已经设置的类。但是对于大多数属性，在任何给定时间都只允许一个值。

【参考方案3】：

$('selector').attr( 'id', 'yourId' );

【参考方案4】：

如果您想“添加到 id”而不是替换它

首先捕获当前 id，然后附加您的新 id。对于在表单上使用输入状态的 twitter 引导程序特别有用。

    new_id = 'old_id inputSuccess';
    old_id = that.attr('id');
    that.attr('id', new_id.replace( /old_id/ig,old_id));

如果不这样做 - 您将丢失之前设置的所有属性。

第，

【讨论】：

一个有效的元素只能有一个id。 ***.com/questions/192048/…

【参考方案5】：

我在咖啡脚本中这样做

booking_module_time_clock_convert_id = () ->
  if $('.booking_module_time_clock').length
    idnumber = 1
    for a in $('.booking_module_time_clock')
      elementID = $(a).attr("id")
      $(a).attr( 'id', "#elementID_#idnumber" )
      idnumber++