jQuery - Добавить идентификатор вместо класса

97

Я использую текущий jQuery :

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

Он применяет текст, содержащийся в хлебной крошке, к 4 элементам на странице, что позволяет мне настраивать стиль специально для этой страницы.

Я хотел бы попробовать добавить идентификатор вместо класса, как я могу этого добиться?

jquery CLiown
источник
Чтобы быть допустимым XHTML, идентификатор должен быть уникальным. Идентификатор должен соответствовать более строгим правилам, например, без пробелов, начинаться с буквы или _, содержать только буквы, цифры или ограниченное количество других символов.
Дуг Домени 01
7
@Peter: добавление ссылки на википедию кажется излишним.
nickf 03
Возможный дубликат добавления атрибута в jQuery
Макьен
Смотрите также addID в jQuery?
Lazerbeak12345

Ответы:

226

Попробуй это:

$('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());
    });
});

Итак, вы меняете / перезаписываете идентификатор трех элементов и добавляете идентификатор к одному элементу. Вы можете изменить в соответствии с вашими потребностями ...

Сарфраз
источник
1
Как насчет кеширования? Вместо того, чтобы создавать 4 разных объекта jQuery для "this". var text = $ (это) .text ();
PetersenDidIt
@petersendidt: согласен, я сказал в своем ответе, что ему нужно изменить в соответствии с потребностями.
Сарфраз,
даже лучше: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. не то чтобы использовать ID здесь - хорошая идея.
nickf 03
Это будет работать только один раз, после чего идентификатор изменится ... также вы продолжите переопределять те же идентификаторы, поэтому вы можете сделать это для $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(или lastдля .stretch_footer). Во всяком случае, это странно.
Коби
26

Имейте в виду, что это перезаписывает любой идентификатор, который уже имеет элемент:

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

Причина, по которой addClassсуществует, заключается в том, что элемент может иметь несколько классов, поэтому вам не нужно обязательно перезаписывать уже установленные классы. Но для большинства атрибутов в любой момент времени разрешено только одно значение.

Энтони
источник
3

если вы хотите «добавить к идентификатору», а не заменить его

сначала захватите текущий идентификатор, затем добавьте свой новый идентификатор. особенно полезно для начальной загрузки twitter, которая использует состояния ввода в своих формах.

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

если вы этого не сделаете - вы потеряете все ранее установленные вами свойства.

hth,

оборота geekbuntu
источник
Допустимый элемент может иметь только один идентификатор. stackoverflow.com/questions/192048/…
полковник клик
3

Я делаю это в coffeescript

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++
Николай
источник