jQuery - เพิ่ม ID แทน Class

100

ฉันใช้jQueryปัจจุบัน:

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

มันใช้ข้อความที่อยู่ในเบรดครัมบ์กับ 4 องค์ประกอบบนหน้าทำให้ฉันสามารถจัดรูปแบบเฉพาะกับเพจที่นั่นได้

ฉันต้องการลองเพิ่ม ID แทนคลาสฉันจะทำสิ่งนี้ได้อย่างไร

jquery

— CLiown
แหล่งที่มา

รหัสต้องไม่ซ้ำกันเพื่อให้เป็น XHTML ที่ถูกต้อง รหัสต้องตรงกับกฎที่เข้มงวดกว่าเช่นห้ามเว้นวรรคขึ้นต้นด้วยตัวอักษรหรือ _ มีเฉพาะตัวอักษรตัวเลขหรืออักขระอื่น ๆ ในจำนวน จำกัด

— Doug Domeny

7

@ ปีเตอร์: การเพิ่มลิงค์ไปยังวิกิพีเดียดูเหมือนจะซ้ำซ้อนเล็กน้อย

— nickf

อาจซ้ำกันของการเพิ่มแอตทริบิวต์ใน jQuery

— Makyen

ดูaddID ใน jQuery ด้วย?

— Lazerbeak12345

232

ลองสิ่งนี้:

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

ดังนั้นคุณกำลังเปลี่ยน / เขียนทับ id ของสามองค์ประกอบและเพิ่ม id ให้กับองค์ประกอบเดียว คุณสามารถปรับเปลี่ยนได้ตามที่คุณต้องการ ...

— ซาร์ฟราซ
แหล่งที่มา

1

แล้วแคชล่ะ? แทนที่จะสร้าง jQuery 4 วัตถุที่แตกต่างกันของ "this" var text = $ (นี้) .text ();

— PetersenDidIt

@petersendidt: ตกลงฉันพูดในคำตอบของฉันว่าเขาต้องแก้ไขตามความต้องการ

— Sarfraz

ที่ดียิ่งขึ้น: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. ไม่ใช่ว่าการใช้ ID ที่นี่เป็นความคิดที่ดี

— nickf

สิ่งนี้จะใช้ได้เพียงครั้งเดียวหลังจากนั้น ID ก็เปลี่ยนไป ... นอกจากนี้คุณยังคงลบล้าง ID เดิมดังนั้นคุณอาจทำเพื่อ$('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(หรือlastสำหรับ.stretch_footer) ก็ได้เช่นกัน อย่างไรก็ตามนี่เป็นเรื่องแปลก

— Kobi

27

โปรดทราบว่าสิ่งนี้จะเขียนทับ ID ใด ๆ ที่องค์ประกอบนั้นมีอยู่แล้ว:

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

สาเหตุที่addClassมีอยู่เนื่องจากองค์ประกอบสามารถมีหลายคลาสได้ดังนั้นคุณจึงไม่ต้องการเขียนทับคลาสที่ตั้งค่าไว้แล้ว แต่ด้วยแอตทริบิวต์ส่วนใหญ่มีเพียงค่าเดียวที่อนุญาตในช่วงเวลาใดเวลาหนึ่ง

— แอนโธนี่
แหล่งที่มา

11

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

— meouw
แหล่งที่มา

3

หากคุณต้องการ "เพิ่มลงใน id" แทนที่จะแทนที่

จับรหัสปัจจุบันก่อนจากนั้นต่อท้ายรหัสใหม่ของคุณ มีประโยชน์อย่างยิ่งสำหรับ twitter bootstrap ซึ่งใช้สถานะการป้อนข้อมูลในแบบฟอร์ม

    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

ฉันทำสิ่งนี้ในกาแฟ

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

— นิโคไล
แหล่งที่มา