Nhận phần tử bằng một phần của Tên hoặc ID

Question

Dưới đây là một ví dụ về hình thức của tôi (chỉ có đầu vào mà tôi muốn, nhưng có nhiều người khác):

<form name="inputform" action="..." method="post"> 
<input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0"> 
<input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00"> 
<input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00"> 
<input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00"> 
<input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1"> 

<!-- another TR --> 

<input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0"> 
<input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00"> 
<input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00"> 
<input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00"> 
<input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1"> 
</form> 

Những gì tôi muốn là để có được giá trị của đầu vào, nhưng vì biểu mẫu được xây dựng bằng PHP, tôi không biết số nhận dạng dòng (77, 108).

Có cách nào để thực hiện điều gì đó như getElementByName('id_qtedje_%') không?

Lưu ý: Tôi không sử dụng bất kỳ thư viện nào và tôi không định sử dụng thư viện đó.

Answer 1

Tốt nhất có lẽ là document.querySelectorAll, mà bạn có thể sử dụng bất kỳ công cụ chọn CSS nào, bao gồm "attribute starts with" selector như input[id^="id_qtedje_"]. Đó là supported on all modern browsers, and also IE8:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]'); 

Nếu bạn muốn chỉ là trận đấu đầu tiên (chứ không phải là một danh sách), bạn có thể sử dụng document.querySelector để thay thế. Nó trả về tham chiếu đến kết quả khớp đầu tiên theo thứ tự tài liệu hoặc null nếu không có gì khớp với.

Cách khác, bạn có thể đưa các yếu tố một tên lớp, sau đó sử dụng document.getElementsByClassName, nhưng lưu ý rằng trong khi getElementsByClassName đã được hỗ trợ trong các phiên bản cũ của Chrome và Firefox, IE8 không có nó, vì vậy nó not as well-supported như-hữu ích hơn querySelectorAll trong thời đại hiện đại.

var elements = document.getElementsByClassName("theClassName"); 

Nếu bạn sử dụng bất kỳ thư viện (jQuery, MooTools, Đóng cửa, Prototype, vv), họ đang có khả năng để có một chức năng bạn có thể sử dụng để tìm kiếm các yếu tố của chỉ là về bất kỳ chọn CSS, lấp đầy những khoảng trống trong trình duyệt hỗ trợ với mã riêng của họ. Ví dụ, trong jQuery, đó là hàm $ (jQuery); trong MooTools và Prototype, nó là $$.

Answer 2

Bạn có thể sử dụng starts with selector trong jQuery

var listOfElements = $('[name^="id_qtedje_"]') 

Bạn cũng có thể quan tâm với contains và ends with selectors

---

Sử dụng querySelectorAll, bạn có thể làm

document.querySelectorAll ('[name^= "id_qtedje_"]')

---

Hoặc:

Giả sử rằng tất cả các yếu tố này là input s, bạn có thể sử dụng này:

function getElementByNameStart(str){ 
var x=document.getElementsByTagName('input') 
for(var i=0;i<x.length;i++){ 
    if(x[i].indexOf(str)==0){ 
    return x[i]; 
} 
} 
} 

mà có thể được gọi là getElementByNameStart ("id_qtedje_")

Lưu ý rằng điều này chỉ trả về thành phần đầu tiên thuộc loại này. Để trả lại tất cả:

function getElementByNameStart(str){ 
var x=document.getElementsByTagName('input') 
var a=[]; 
for(var i=0;i<x.length;i++){ 
    if(x[i].indexOf(str)==0){ 
    a.push(x[i]) 
    } 
} 
return a; 
} 

Nếu yếu tố này là của bất kỳ loại, thay thế "đầu vào" với "*" (hãy cẩn thận, điều này có thể làm cho mã của bạn chậm)