如何獲取所有名稱以某個字符串開頭的元素？

我有一個HTML頁面。如何獲取所有名稱以某個字符串開頭的元素？

我想提取名稱以「q1_」開頭的所有元素。

我該如何在JavaScript中實現這一點？

謝謝！

來源

2010-04-11 Misha Moroshko

你的意思是標籤名稱或的'name'屬性的值？ – Gumbo 2010-04-11 15:15:39

相同類型標籤的所有元素都是問題嗎？他們都是DIV，還是LI？ – graphicdivine 2010-04-11 15:19:09

是的，所有元素都是「輸入」類型。 – 2010-04-11 15:25:24

一個快速簡便的方法是使用jQuery並做到這一點：

var $eles = $(":input[name^='q1_']").css("font-color","yellow");

這會搶其名屬性與「q1_」開頭的所有元素。向得到的jQuery對象的集合轉換成DOM收集，做到這一點：

var DOMeles = $eles.get();

看到http://api.jquery.com/attribute-starts-with-selector/

在純DOM，你可以使用getElementsByTagName抓住所有投入要素，並遍歷結果數組。與name元素以「q1_」被推到另一個陣列：

var eles = []; 
var inputs = document.getElementsByTagName("input"); 
for(var i = 0; i < inputs.length; i++) { 
    if(inputs[i].name.indexOf('q1_') == 0) { 
     eles.push(inputs[i]); 
    } 
}

來源

2010-04-11 15:18:19 karim79

什麼沒有jQuery？ – Varun 2011-11-23 05:35:22

Varun，在karim79的回答中修剪的第二個代碼是純javascript，他沒有使用jQuery。 – cleberz 2014-05-06 17:40:03

不錯的答案，除了你需要'.css（「color」，「yellow」）;'，因爲'font-color'在css中不存在。我也經常犯這個錯誤。：P – 2015-02-20 23:43:07

您可以嘗試使用jQuery與Attribute Contains Prefix Selector。

$('[id|=q1_]')

雖然沒有測試過。

來源

2010-04-11 15:22:42 anonymous

'[attr | = value]'選擇器應該用於語言標識符。 – Gumbo 2010-04-11 15:24:47

您可以使用getElementsByName（「input」）來獲取頁面上所有輸入的集合。然後循環收集，在路上檢查名稱。事情是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 

</head> 
<body> 

    <input name="q1_a" type="text" value="1A"/> 
    <input name="q1_b" type="text" value="1B"/> 
    <input name="q1_c" type="text" value="1C"/> 
    <input name="q2_d" type="text" value="2D"/> 

    <script type="text/javascript"> 
    var inputs = document.getElementsByTagName("input"); 
    for (x = 0 ; x < inputs.length ; x++){ 
    myname = inputs[x].getAttribute("name"); 
    if(myname.indexOf("q1_")==0){ 
     alert(myname); 
     // do more stuff here 
     } 
    } 
    </script> 
</body> 
</html>

Demo

來源

2010-04-11 15:56:16 graphicdivine

感謝您的代碼示例！ – 2010-04-11 16:06:14

更有效嗎？ – Varun 2011-11-23 05:35:41

@Varun這是什麼效率低下？ – graphicdivine 2011-12-30 14:08:29

HTML DOM querySelectorAll（）方法似乎容易在這裏。

W3School鏈接給here

語法（如W3School給出）

document.querySelectorAll(CSS selectors)

所以答案。

document.querySelectorAll("[name^=q1_]")

Fiddle

編輯：

考慮FLX的建議添加鏈接MDN here

來源

2016-06-16 09:57:10 paje007

Your anwer是有效的，但W3School被認爲是一個不好的來源（到處都是過時的文檔）。更好地使用MDN。 – FLX 2016-06-16 10:09:29

如何獲取所有名稱以某個字符串開頭的元素？

回答

相關問題