jQuery - Thêm ID thay vì Lớp

94

Tôi đang sử dụng jQuery hiện tại :

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

Nó áp dụng văn bản được giữ trong breadcrumb cho 4 phần tử trên trang, cho phép tôi tạo kiểu cụ thể cho trang trên đó.

Tôi muốn thử thêm ID thay vì lớp, làm cách nào để đạt được điều này?

jquery

— CLiown
nguồn

ID phải là duy nhất để là XHTML hợp lệ. ID phải phù hợp với các quy tắc chặt chẽ hơn, ví dụ: không có khoảng trắng, bắt đầu bằng chữ cái hoặc _, chỉ chứa các chữ cái, số hoặc một số lượng hạn chế các ký tự khác.

— Doug Domeny

7

@Peter: thêm một liên kết đến wikipedia có vẻ hơi thừa.

— nickf

Có thể có bản sao khi Thêm thuộc tính trong jQuery

— Makyen

Xem thêm addID trong jQuery?

— Lazerbeak12345

223

Thử cái này:

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

Vì vậy, nó trở thành;

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

Vì vậy, bạn đang thay đổi / ghi đè id của ba phần tử và thêm id vào một phần tử. Bạn có thể sửa đổi theo nhu cầu của mình ...

— Sarfraz
nguồn

1

Làm thế nào về bộ nhớ đệm? Thay vì tạo 4 đối tượng jQuery khác nhau của "this". var text = $ (this) .text ();

— PetersenDidIt

@petersendidt: đồng ý, tôi đã nói trong câu trả lời của mình, rằng anh ấy cần sửa đổi theo nhu cầu.

— Sarfraz

thậm chí tốt hơn: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. không phải là sử dụng ID ở đây là một ý tưởng hay.

— nickf

Điều này sẽ chỉ hoạt động một lần, sau đó ID thay đổi ... ngoài ra, bạn tiếp tục ghi đè các ID giống nhau, vì vậy bạn cũng có thể làm điều đó cho $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(hoặc last, cho .stretch_footer). Dù sao, điều này thật kỳ lạ.

— Kobi

26

Hãy nhớ rằng điều này sẽ ghi đè bất kỳ ID nào mà phần tử đã có:

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

Lý do addClasstồn tại là vì một phần tử có thể có nhiều lớp, vì vậy bạn sẽ không muốn ghi đè lên các lớp đã được thiết lập. Nhưng với hầu hết các thuộc tính, chỉ có một giá trị được phép tại bất kỳ thời điểm nào.

— Anthony
nguồn

11

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

— meouw
nguồn

3

nếu bạn muốn 'thêm vào id' thay vì thay thế nó

chụp lại id hiện tại trước, sau đó thêm id mới của bạn. đặc biệt hữu ích cho twitter bootstrap sử dụng trạng thái đầu vào trên biểu mẫu của chúng.

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

nếu không - bạn sẽ mất bất kỳ thuộc tính nào mà bạn đã đặt trước đó.

hth,

— geekbuntu
nguồn

Một phần tử hợp lệ chỉ có thể có một id duy nhất. stackoverflow.com/questions/192048/…

— colonelclick vào

3

Tôi đang làm điều này trong 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
nguồn