어떻게 순수 자바 스크립트의 jQuery를 같은 선택을 사용할 수 있습니다

Question

나는이 찾고있는 무엇 :

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

가 어떻게 그 jQuery를 스타일에서 순수 자바 스크립트 스타일을 변경할 수 있습니까?

그래서 name이 "문자"로 끝나는 <input> 태그를 원합니다.

---

나는 ... 내 브라우저가 지원 querySelector을 해달라고 참고로 나는 C#을 윈폼에서 웹 브라우저 구성 요소를 사용하고 코드를 조금 변경

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