jQuery - Tambahkan ID, bukan Class

97

Saya menggunakan jQuery saat ini :

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

Ini menerapkan teks yang ada di runut tautan ke 4 elemen di halaman, memungkinkan saya untuk menata gaya khusus ke halaman di sana.

Saya ingin mencoba menambahkan ID alih-alih kelas, bagaimana saya bisa mencapai ini?

jquery CLiown
sumber
ID harus unik agar XHTML yang valid. Sebuah ID harus sesuai dengan aturan yang lebih ketat, misalnya tanpa spasi, dimulai dengan huruf atau _, hanya berisi huruf, angka atau karakter lain dalam jumlah terbatas.
Doug Domeny
7
@ Peter: menambahkan tautan ke wikipedia sepertinya sedikit berlebihan.
nickf
Kemungkinan duplikat dari Menambahkan atribut di jQuery
Makyen
Lihat juga addID di jQuery?
Lazerbeak12345

Jawaban:

226

Coba ini:

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

Jadi itu menjadi;

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

Jadi Anda mengubah / menimpa id dari tiga elemen dan menambahkan id ke satu elemen. Anda dapat memodifikasi sesuai kebutuhan Anda ...

Sarfraz
sumber
1
Bagaimana dengan caching? Daripada membuat 4 objek jQuery yang berbeda dari "ini". var text = $ (ini) .text ();
PetersenDidIt
@petersendidt: setuju, saya katakan dalam jawaban saya, bahwa dia perlu memodifikasi sesuai kebutuhan.
Sarfraz
bahkan lebih baik: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. bukan berarti menggunakan ID di sini adalah ide yang bagus.
nickf
Ini hanya akan bekerja sekali, setelah itu ID berubah ... juga, Anda terus menimpa ID yang sama, jadi Anda sebaiknya melakukannya untuk $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(atau last, untuk .stretch_footer). Bagaimanapun, ini aneh.
Kobi
26

Ingatlah bahwa ini menimpa ID apa pun yang sudah dimiliki elemen tersebut:

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

Alasan mengapa addClassada adalah karena sebuah elemen dapat memiliki banyak kelas, jadi Anda tidak perlu menimpa kelas yang sudah disetel. Tetapi dengan sebagian besar atribut, hanya ada satu nilai yang diperbolehkan pada waktu tertentu.

Anthony
sumber
11 
$('selector').attr( 'id', 'yourId' );
meouw
sumber
3

jika Anda ingin 'menambah id' daripada menggantinya

tangkap id saat ini terlebih dahulu, lalu tambahkan id baru Anda. sangat berguna untuk bootstrap twitter yang menggunakan status input pada formulirnya.

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

jika tidak - Anda akan kehilangan semua properti yang Anda setel sebelumnya.

hth,

geekbuntu
sumber
Elemen yang valid hanya dapat memiliki satu id. stackoverflow.com/questions/192048/…
colonelclick
3

Saya melakukan ini di 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++
Nicolai
sumber