我怎樣才能在純JavaScript中使用jQuery的樣選擇

Question

我要找的是：

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

我怎樣才能改變這種狀況從jQuery的風格，以一個純JavaScript的風格？

所以我想012bd以「letter」結尾的<input>標籤。

---

我改變了代碼有點...我的瀏覽器不支持querySelector，僅供參考，我使用C＃的WinForms WebBrowser組件

Answer 1

嘗試：

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

對於現代的瀏覽器：

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

將返回第一個匹配。

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

將返回匹配的列表。

我懷疑，如果你通過jQuery的源代碼看，它使用document.querySelector[All]時，它可用。

Answer 3

這是一箇舊帖子，但我搜索了類似的解決方案，但我還沒有找到它。

所以我做一個小功能，要做到這一點（這是優化的）：

/** 
* 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; 
}