Jak mogę używać selektor jQuery jak w czystym JavaScript

Question

Czego szukasz:

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

Jak mogę to zmienić od stylu jQuery do czystego stylu javascript?

Więc chcę, aby <input> znaczniki, które name kończy się na "litera".

---

Zmieniłem kod trochę ... Moja przeglądarka nie support querySelector i FYI używam komponent WebBrowser na C# WinForms

Answer 1

Spróbuj:

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

Dla nowoczesnych przeglądarek:

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

zwróci pierwszy mecz.

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

zwróci listę meczów.

Podejrzewam, że jeśli przejrzysz kod źródłowy jquery, użyje on document.querySelector[All], gdy będzie dostępny.

Answer 3

To stary post, ale szukałem podobnego rozwiązania i nie znalazłem go.

Więc ja robi trochę funkcji, aby to zrobić (jest to możliwe do optymalizacji):

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