Làm cách nào để thay đổi tên thuộc tính HTML bằng jQuery?

Question

Tôi muốn thay đổi tất cả tên của các thuộc tính trong đó class="testingCase" trong toàn bộ toàn bộ tài liệu html của tôi.

ví dụ: Thay đổi:

<a class="testingCase" href="#" title="name of testing case">Blabla</a> 
<a class="testingCase" href="#" title="name of another testing case">Bloo</a> 

Để này:

<a class="testingCase" href="#" newTitleName="name of testing case">Blabla</a>` 
<a class="testingCase" href="#" newTitleName="name of another testing case">Bloo</a>` 

Tôi đã nghĩ đến một tìm và thay thế nhưng điều đó dường như rất nhiều mã cho một cái gì đó dễ dàng như vậy. Có một chức năng jQuery cho điều này hay một phương pháp đơn giản?

Answer 1

Tôi không nghĩ rằng bạn có thể "đổi tên" một thuộc tính, nhưng bạn có thể tạo các thuộc tính mới và loại bỏ những người khác ...

$('a.testingCase[title]').each(function() { 
    var $t = $(this); 
    $t 
     .attr({ 
      newTitleName : $t.attr('title'), 
     }) 
     .removeAttr('title') 
    ; 
}); 

Edit: thêm vào các bit mà làm cho nó chỉ chọn a yếu tố với class="testingCase"

Answer 2

tôi không nghĩ rằng bạn có thể thay đổi một tên thuộc tính nhưng những gì bạn có thể làm là:

• được tất cả các <a> thẻ với một thuộc tính tiêu đề;
• tìm kiếm chúng, tạo thuộc tính newTitleName có cùng giá trị với tiêu đề;
• sau đó xóa thuộc tính tiêu đề.

JQuery cho phép bạn làm điều đó với các chức năng được xây dựng trong cách này:

/* get all <a> with a "title" attribute that are testingCase 
then apply an anonymous function on each of them */ 

$('a.testingCase[title]').each(function() { 

    /* create a jquery object from the <a> DOM object */ 
    var $a_with_title = $(this);  

    /* add the new attribute with the title value */ 
    $a_with_title.attr("newTitleName", $a_with_title.getAttribute('title')); 

    /* remove the old attribute */ 
    $a_with_title.removeAttr('title'); 

}); 

Answer 3

Dưới đây là một plugin đơn giản jquery-phong cách cung cấp cho bạn một phương pháp renameAttr:

// Rename an entity attribute 
jQuery.fn.renameAttr = function(oldName, newName) { 
    var args = arguments[0] || {}; 
    var o = $(this[0]) 

     o 
     .attr(
      newName, o.attr(oldName) 
     ) 
     .removeAttr(oldName) 
     ; 
}; 

Ngoài ra còn có this example mà thêm một tùy chọn để xóa dữ liệu cho thuộc tính cũ.

Answer 4

Một lát sau nhưng link này có một phần mở rộng chức năng jquery lớn:

jQuery.fn.extend({ 
  renameAttr: function(name, newName, removeData) { 
    var val; 
    return this.each(function() { 
      val = jQuery.attr(this, name); 
      jQuery.attr(this, newName, val); 
      jQuery.removeAttr(this, name); 
      // remove original data 
      if (removeData !== false){ 
        jQuery.removeData(this, name.replace('data-','')); 
      } 
    }); 
  } 
}); 

Ví dụ

// $(selector).renameAttr(original-attr, new-attr, removeData); 
  
// removeData flag is true by default 
$('#test').renameAttr('data-test', 'data-new'); 
  
// removeData flag set to false will not remove the 
// .data("test") value 
$('#test').renameAttr('data-test', 'data-new', false); 

tôi đã không viết NÀY. NHƯNG TÔI PHẢI KIỂM TRA VỚI JQ 1.10. MÃ ĐƯỢC TỪ LIÊN KẾT.

Answer 5

Một lót

$('selector').replaceWith($('selector')[0].outerHTML.replace("oldName=","newName=")); 

làm việc tuyệt vời cho tôi khi tôi cần thiết để lột tiền tố từ tất cả các thuộc tính của tôi

$('selector').replaceWith($('selector')[0].outerHTML.(/prefix\-/g,""));