jQuery có tương đương với Element.identify của Prototype không?

Question

Có phương pháp tích hợp sẵn hoặc plugin mặc định defacto cho phép bạn tự động chỉ định một ID duy nhất cho một phần tử trong jQuery hay bạn cần thực hiện một cái gì đó như thế này không? Tôi đang tìm jQuery tương đương với Prototype's identify method

Đây là một ví dụ. Tôi có một số cấu trúc HTML trên một trang có dạng như thế này

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

Tôi muốn chỉ định từng ID sẽ là duy nhất cho trang. Vì vậy, sau khi gọi một cái gì đó như thế này

$('#foo span').identify('prefix'); //fake code, no such method 

DOM render sẽ giống như thế này

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span id="prefix_2"></span> 
    <span id="prefix_3"></span> 
    <span id="prefix_4"></span> 
</div> 

Có điều gì chính thức-ish/mạnh mẽ cho jQuery, hoặc là một cái gì đó này hầu hết các nhà phát triển jQuery cuộn của riêng mình ?

Answer 1

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if(this.id) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

Tested này trên:

<span id='test_2'></span> 
<span>test1</span> 
<span>test2</span> 
<span>test3</span> 

Turned nó để:

<span id="test_2"></span> 
<span id="test_1">test1</span> 
<span id="test_3">test2</span> 
<span id="test_4">test3</span> 

Answer 2

Không phải là tôi biết, nhưng bạn có thể tự làm điều này bằng cách thêm thuộc tính id và cung cấp GUID.

Để thêm thuộc tính:

$(foo).attr("id", createGuid()); 

Đối với việc thực hiện createGuid(), see this question.

Lưu ý rằng bạn có thể dễ dàng biến điều này thành jQuery plug-in để chức năng này (thậm chí bạn có thể đặt tên là identify()) có sẵn trên bất kỳ biểu thức $- nào.

Answer 3

Có thể thử

$("#foo span").each(function(){ 
    $(this).attr("id", "prefix_" + $(this).parent().index($(this))); 
}); 

Answer 4

Dựa trên Paolo của giải pháp:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

Một thay đổi nhỏ sẽ tránh tính lại các id đã sử dụng.

Answer 5

Tôi muốn thay đổi chức năng cho một chút và làm cho nó:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while(document.getElementById(id) != null);    
     $(this).attr('id', id);    
    }); 
}; 

ID có thể chứa các ký tự đặc biệt mà sẽ yêu cầu thoát để hoạt động đúng với động cơ CSS selector của jQuery - như "". Vì vậy, thay vì tìm kiếm chúng và thoát chúng, nó đơn giản và nhanh hơn để thay thế nó bằng phương thức tài liệu.