在jQuery中等價於$（'input [name $ =「value」]'）？

Question

我怎樣才能得到一個輸入元素的名稱屬性以特定值結束使用JavaScript？

我發現這個$('input[name$="value"]')方法可在jQuery。

有沒有像JavaScript中可用的功能？由於某些原因，我無法使用jQuery。

Answer 1

我很驚訝，沒有人提到過這一點呢。您是否嘗試過：

var elements = document.querySelectorAll('input[name$="value"]'); 

如果瀏覽器支持querySelectorAll方法這隻會工作，但它是如果支持，找到了jQuery使用下面。

下面是列出的方法瀏覽器支持表：我要去承擔

When can I use querySelector/querySelectorAll?

Answer 2

該方法返回元素

var elements = document.getElementsByName("value"); 

Answer 3

陣列

你可以這樣做：

console.log(document.getElementsByName("value")[0]); 

或者，如果你想找到第一input元素名稱中帶有「值」：

var searchString = "value"; 
var elems = document.getElementsByTagName('input'), wantedElem; 

for(var i = 0, len = elems.length; i < len; i++) { 
    if(elems[i].name.lastIndexOf(searchString) == elems[i].name.length-searchString.length) { 
     wantedElem = elems[i]; 
     break; 
    } 
} 

console.log(wantedElem); 

Answer 4

你已經放置屬於他們的地方（在<form>元素）這些<input>元素。

通過DOM API遍歷表單控件的最簡單方法是通過HTMLFormElement::elementsHTMLCollection。它允許命名遍歷，對於特定元素非常方便。

例如，請考慮下面的標記：

<form action="./" method="post" name="test" 
    onsubmit="return false;"> 
    <fieldset> 
     <legend>Test Controls</legend> 
     <input name="control_one" type="text" 
      value="One"> 
     <input name="control_two" type="text" 
      value="Two"> 
     <input name="control_three" type="text" 
      value="Three"> 
    </fieldset> 
</form> 

此之後，需要一些簡單的文檔樹遍歷。這是它的全部：

var test = document.forms.test, 
    controls = test.elements; 

function traverseControl(control) 
{ 
    var patt = /one$/, 
     match = patt.test(control.name); 
    if (match) { 
     // do something 
     console.log(control); 
    } 
} 

function traverseControls(nodes) 
{ 
    var index; 
    if (typeof nodes === "object" && 
     nodes.length) { 
     index = nodes.length - 1; 
     while (index > -1) { 
      traverseControl(
       nodes[index] 
      ); 
      index -= 1; 
     } 
    } 
} 

traverseControls(controls); 

正如你所看到的，它確實不是太困難。使用HTMLCollection的結果是新舊瀏覽器的支持。由於HTMLCollection在DOM 0中實現，因此得到廣泛支持。

未來，我會建議使用遍歷模式，這遠不如模糊。如果您控制了正在遍歷的文檔樹（即您編寫了標記），則應該已經知道控件的控制。否則，必須使用類似前述的模糊方法。

工作實施例：http://jsbin.com/epusow

更多，this article可以細讀。