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существует, заключается в том, что элемент может иметь несколько классов, поэтому вам не нужно обязательно перезаписывать уже установленные классы. Но для большинства атрибутов в любой момент времени разрешено только одно значение.

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

11

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

— мяу
источник

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++

— Николай
источник