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

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

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

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

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

5 74
jquery

5 ответов:

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

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

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

182

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

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

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

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

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

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

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

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

hth,

4

Я делаю это в 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++
3