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

Odpowiedzi:

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