Thay đổi ID của một phần tử bằng jQuery


302

Tôi cần thay đổi ID của một phần tử bằng jQuery.

Rõ ràng những điều này không hoạt động:

jQuery(this).prev("li").attr("id")="newid"
jQuery(this).prev("li")="newid"

Tôi phát hiện ra rằng tôi có thể làm cho nó xảy ra với đoạn mã sau:

jQuery(this).prev("li")show(function() {
    this.id="newid";
});

Nhưng điều đó dường như không đúng với tôi. Có phải là một cách tốt hơn, không? Ngoài ra, trong trường hợp không có, tôi có thể sử dụng phương pháp nào khác thay vì hiển thị / ẩn hoặc các hiệu ứng khác? Rõ ràng là tôi không muốn hiển thị / ẩn hoặc ảnh hưởng đến phần tử mỗi lần, chỉ để thay đổi ID của nó.

(Đúng, tôi là người mới sử dụng jQuery.)

Chỉnh sửa
Tôi không thể sử dụng các lớp trong trường hợp này, tôi phải sử dụng ID.


5
Trong JavaScript, bạn có thể gán cho một biến ( foo = 1), thành viên của một đối tượng ( foo.bar = 2hoặc foo['bar'] = 2) hoặc một chỉ mục mảng ( foo[0] = 3), nhưng gán cho một biểu thức, như kết quả của một toán tử ( (x + b) = 5) hoặc kết quả của một lệnh gọi hàm ( foo() = 1,) foo(x).bar(y) = 7) không có ý nghĩa gì, vì vậy chắc chắn sẽ không phải là cách mọi thứ hoạt động trong jQuery hoặc bất kỳ thư viện JavaScript nào khác.
rakslice

Câu trả lời:


521

Cú pháp của bạn không chính xác, bạn nên truyền giá trị làm tham số thứ hai:

jQuery(this).prev("li").attr("id","newId");

4
Tôi nghĩ newId nên được trích dẫn
Jay Corbett

5
Bạn không cần tách phần tử khỏi DOM và thay thế nó bằng phần tử mới bằng ID mới ở vị trí của nó? Để tránh phá vỡ DOM ...?
cllpse

15
jQuery quan tâm đến điều đó, roosteronacid.
McPherrinM

15
đã đến đây để kiểm tra lại việc xác định lại id - bây giờ có nên .prop( ... )thay thế .attr( ... )không?
Carl

2
@Carl theo các tài liệu và ví dụ về jquery mới nhất, idvẫn nên được đặt bằng cách sử dụngattr(...)
JoeBrockhaus

71

TÙY CHỌN ƯU ĐÃI trên .attrlà sử dụng .propnhư vậy:

$(this).prev('li').prop('id', 'newId');

.attrlấy thuộc tính của phần tử trong khi .proplấy thuộc tính mà thuộc tính tham chiếu (nghĩa là những gì bạn thực sự có ý định sửa đổi)


4
.attr đã không được chấp nhận - đây là cách làm đúng.
PointlessSpike

7
Thông tin đó lấy từ đâu? api.jquery.com/attr không nói gì về sự phản đối ...
Sergej

Nó không được phản đối. " Kể từ jQuery 1.6 , .prop()phương thức này cung cấp một cách để truy xuất các giá trị .attr()thuộc tính một cách rõ ràng, trong khi lấy các thuộc tính."
Đèn chiếu sáng

@Illuminator Tôi đã sửa câu trả lời của mình cho phù hợp. Cảm ơn.
Jeremy Moritz

45

Những gì bạn muốn làm là:

jQuery(this).prev("li").attr("id", "newID");

Điều đó sẽ đặt ID thành ID mới


11

Tôi đã làm một cái gì đó tương tự với cấu trúc này

$('li').each(function(){
  if(this.id){
    this.id = this.id+"something";
  }
});

7

Tôi không chắc mục tiêu của bạn là gì, nhưng có thể tốt hơn khi sử dụng addClass thay thế? Ý tôi là một ID đối tượng theo ý kiến ​​của tôi nên tĩnh và cụ thể đối với đối tượng đó. Nếu bạn chỉ cố gắng thay đổi nó từ hiển thị trên trang hoặc một cái gì đó tương tự, tôi sẽ đặt các chi tiết đó vào một lớp và sau đó thêm nó vào đối tượng thay vì cố gắng thay đổi ID của nó. Một lần nữa, tôi đang nói rằng không hiểu mục tiêu gạch chân của bạn.


3
niềm vui của hệ thống di sản - Tôi hiểu nỗi đau của bạn sau đó. Eran trả lời chắc chắn là tốt nhất rồi.
Tim Knight

5
Trên thực tế, việc đặt id là một việc hữu ích và đáng làm nếu bạn xây dựng DOM bằng cách sử dụng các mẫu ẩn trong HTML và sau đó nhân bản chúng bằng cách sử dụng jquery.
Steve Knight

5
$("#LeNomDeMaBaliseID").prop('id', 'LeNouveauNomDeMaBaliseID');

1
Giải pháp này đã được cung cấp tại đây
Cristik

1
Vui lòng không đăng câu trả lời chỉ có mã - luôn luôn thêm lời giải thích cho mã của bạn trong câu trả lời.
Daniel W.

2
<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

Điều này có thể làm cho tất cả các mục đích. Chỉ cần thêm trước thẻ đóng cơ thể của bạn và không được thêm Jquery.min.js


0

Câu trả lời của Eran là tốt, nhưng tôi sẽ thêm vào đó. Bạn cần xem bất kỳ tương tác nào không trực tiếp với đối tượng (nghĩa là, nếu một sự kiện onclick gọi một hàm, nó vẫn sẽ), nhưng nếu có một số xử lý sự kiện javascript hoặc jQuery được gắn vào ID đó, về cơ bản nó sẽ bị bỏ qua :

$("#myId").on("click", function() {});

Nếu ID bây giờ được thay đổi thành # myID123, chức năng được đính kèm ở trên sẽ không còn hoạt động chính xác theo kinh nghiệm của tôi.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.