jQuery - додайте ідентифікатор замість класу

94

Я використовую поточний 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

— Кліон
джерело

Ідентифікатор повинен бути унікальним, щоб бути дійсним XHTML. Ідентифікатор повинен відповідати більш жорстким правилам, наприклад, без пробілів, що починаються з літери або _, містять лише літери, цифри або обмежену кількість інших символів.

— Дуг Домені

7

@Peter: додавання посилання на wikipedia видається трохи зайвим.

— nickf

Можливий дублікат додавання атрибута в jQuery

— Makyen

Див. Також addID у jQuery?

— Lazerbeak12345

223

Спробуйте це:

$('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 об’єктів "цього". var text = $ (this) .text ();

— PetersenDidIt

@petersendidt: погодився, я сказав у своїй відповіді, що йому потрібно змінити відповідно до потреб.

— Сарфраз

ще краще: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. не те, що тут використовувати ідентифікатор - це гарна ідея.

— nickf

Це спрацює лише один раз, після чого ідентифікатор змінюється ... також ви продовжуєте замінювати ті самі ідентифікатори, тому ви могли б це зробити для $('#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

якщо ви хочете "додати до ідентифікатора", а не замінити його

спочатку захопіть поточний ідентифікатор, а потім додайте новий. особливо корисно для завантажувального твіттера, який використовує вхідні стани у своїх формах.

    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/…

— colonelclick

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

— Ніколай
джерело