Làm thế nào tôi có thể sử dụng bộ chọn jQuery giống như trong tinh khiết JavaScript

Question

Những gì tôi tìm kiếm là:

var arrinput = $('input[name$="letter"]') 

Làm thế nào tôi có thể thay đổi điều đó từ phong cách jQuery để một phong cách javascript tinh khiết?

Vì vậy, tôi muốn các thẻ <input> mà name được kết thúc bằng "chữ cái".

---

tôi đã thay đổi mã một chút ... Trình duyệt của tôi không hỗ trợ querySelector và FYI Tôi đang sử dụng phần webbrowser trên C# winforms

Answer 1

Hãy thử:

var items = document.getElementsByTagName('input'); 
for (var i=0; i<items.length; i++) { 
    var item = items[i]; 
    if (/letter$/.test(item.name)) { 
     item.value = "A letter"; 
    } 
} 

Answer 2

Đối với các trình duyệt hiện đại:

document.querySelector('input[name$=letter]');

sẽ trả về kết quả trùng khớp đầu tiên.

document.querySelectorAll('input[name$=letter]');

sẽ trả về danh sách kết quả phù hợp.

Tôi nghi ngờ rằng nếu bạn xem qua mã nguồn jquery, nó sử dụng document.querySelector[All] khi có sẵn.

Answer 3

Đó là một bài đăng cũ, nhưng tôi đã tìm kiếm một giải pháp tương tự và tôi chưa tìm thấy nó.

Vì vậy, tôi đã làm một chức năng nhỏ để làm điều đó (đó là optimizable):

/** 
* Searches and finds the parent node for a dom object 
* 
* @examples: 
* getParent(elem, 'div')     // The first div parent found 
* getParent(elem, 'div[id]')    // The first div parent with an id found 
* getParent(elem, 'div[id="toto"]')  // The first div parent with id equals toto found 
* getParent(elem, 'div[id=^="toto"]')  // The first div parent with id start by toto found 
* getParent(elem, 'div[id=$="toto"]')  // The first div parent with id end by toto found 
* getParent(elem, 'div[id=*="toto"]')  // The first div parent with id contains toto found 
* 
* @param domObject elem 
* @param string [target] 
* @return domObject or null 
*/ 
function getParent(elem, target) 
{ 
    if(target == null) 
     return elem.parentNode; 

    var elem_name = target, 
     attr_name = null, attr_value = null, 
     compare_type = null, 
     match_val = target.match(/\[.+[^\[\]]\]$/i); 

    if(match_val != null) 
    { 
     elem_name = elem_name.replace(match_val[0], ''); 

     var expr = match_val[0].substr(1, match_val[0].length-2), 
      tmp = expr.split('='); 

     attr_name = tmp[0]; 
     if(tmp.length == 2) 
     { 
      attr_value = tmp[1].toLowerCase(); 
      attr_value = attr_value.replace(/(\'|\")+/ig, ''); 

      if(attr_name.match(/\^$/)) 
       compare_type = 'begin'; 
      else if(attr_name.match(/\*$/)) 
       compare_type = 'all'; 
      else if(attr_name.match(/\$$/)) 
       compare_type = 'end'; 
      else 
       compare_type = 'simple'; 

      if(compare_type != 'simple') 
       attr_name = attr_name.substr(0, attr_name.length-1); 
     } 
    } 

    var parent = elem.parentNode; 

    do 
    { 
     if(parent.nodeName.toUpperCase() == elem_name.toUpperCase()) 
     { 
      if(attr_name != null) 
      { 
       var attribute = parent.getAttribute(attr_name).toLowerCase(); 
       if(attribute != null && attribute != '') 
       { 
        if(attr_value == null) 
         return parent; 

        if(compare_type == 'simple' && attribute == attr_value) 
         return parent; 
        if(compare_type == 'begin' && attribute.match(eval('/^'+attr_value+'/ig'))) 
         return parent; 
        if(compare_type == 'end' && attribute.match(eval('/'+attr_value+'$/ig'))) 
         return parent; 
        if(compare_type == 'all' && attribute.match(eval('/'+attr_value+'/ig'))) 
         return parent; 
       } 
      } else { 
       return parent; 
      } 
     } 

     parent = parent.parentNode; 
    } 
    while(parent != null); 

    return null; 
}