jQuery - Dodaj identyfikator zamiast klasy

99

Używam aktualnego jQuery :

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

Stosuje tekst znajdujący się w menu nawigacyjnym do 4 elementów na stronie, dzięki czemu mogę dostosować styl do strony, na której się znajduje.

Chciałbym spróbować dodać identyfikator zamiast klasy, jak mogę to osiągnąć?

jquery

— CLiown
źródło

Identyfikator musi być unikalny, aby był prawidłowym XHTML. Identyfikator musi odpowiadać ściślejszym regułom, np. Bez spacji, zaczynać się od litery lub _, zawierać tylko litery, cyfry lub ograniczoną liczbę innych znaków.

— Doug Domeny

7

@Peter: dodanie linku do wikipedii wydaje się trochę zbędne.

— nickf

Możliwy duplikat atrybutu Adding w jQuery

— Makyen

Zobacz także addID w jQuery?

— Lazerbeak12345

232

Spróbuj tego:

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

Tak się stało;

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

Więc zmieniasz / nadpisujesz id trzech elementów i dodajesz id do jednego elementu. Możesz modyfikować według potrzeb ...

— Sarfraz
źródło

1

A co z buforowaniem? Zamiast tworzyć 4 różne obiekty jQuery „this”. var text = $ (this) .text ();

— PetersenDidIt

@petersendidt: zgodził się, powiedziałem w mojej odpowiedzi, że musi zmodyfikować zgodnie z potrzebami.

— Sarfraz

nawet lepiej: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. nie, że użycie identyfikatora jest tutaj dobrym pomysłem.

— nickf

To zadziała tylko raz, po czym identyfikator się zmieni ... ponadto nadal nadpisujesz te same identyfikatory, więc równie dobrze możesz to zrobić dla $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(lub lastdla .stretch_footer). W każdym razie to dziwne.

— Kobi

27

Pamiętaj, że spowoduje to nadpisanie dowolnego identyfikatora, który już ma element:

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

Powodem, dla którego addClassistnieje, jest to, że element może mieć wiele klas, więc nie chcesz koniecznie nadpisywać już ustawionych klas. Jednak w przypadku większości atrybutów w danym momencie dozwolona jest tylko jedna wartość.

— Anthony
źródło

11

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

— meouw
źródło

3

jeśli chcesz „dodać do identyfikatora” zamiast go zastępować

przechwyć najpierw bieżący identyfikator, a następnie dołącz nowy identyfikator. szczególnie przydatne w przypadku ładowania początkowego Twittera, który używa stanów wejściowych w swoich formularzach.

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

jeśli tego nie zrobisz - utracisz wszystkie właściwości z poprzedniego zestawu.

hth,

— geekbuntu
źródło

Prawidłowy element może mieć tylko jeden identyfikator. stackoverflow.com/questions/192048/…

— colonelclick

3

Robię to w skrypcie kawowym

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

— Nicolai
źródło