获取类包含给定字符串的元素的ID

我目前正试图找出获取元素ID的方法，具体取决于它的类是否包含某个元素。我不确定是否有比现在更好的方法来做到这一点，但环顾四周，没有任何东西符合我的需求。我现在的代码是，我正在寻找一个div元素，其中的类包含字符串“one”，但不限于此。目前只有一个含有该字符串元素，但警告为我提供了[对象节点列表（我很可能是过于复杂这一点）：获取类包含给定字符串的元素的ID

$idToMove = document.querySelectorAll('div[class^="one"]'); 
     alert($idToMove);

来源

2016-05-12 Wesley

可能重复的[查找页面中的元素ID包含使用jQuery的特定文本的所有元素]（http://stackoverflow.com/questions/1206739/find-all-elements-on-a-page-它的元素id包含一个特定文本使用jquer） – TylerH

document.querySelectorAll()返回一个节点列表（有点像数组），如果你肯定只会有一个你有几个选项。

1）使用.querySelector代替：

// returns the first node that matches 
var elm = document.querySelector('div[class~="one"]'); 
console.log(elm.id);

2）返回列表中访问的第一个元素：

// returns all nodes that match 
var elms = document.querySelectorAll('div[class~="one"]'); 
console.log(elms[0].id);

确保为null检查的.querySelectorAll.querySelector和长度检查的回报收益。

另请注意，我使用~=而不是^=。你可以阅读on the MDN关于所有相等运算符之间的差异。但是，对于这两种：

[ATTR〜=值] 表示具有attr的属性名，其值是的话，其中的一个是完全的“价值”的空格隔开的列表的元素。

[attr^= value] 表示一个元素，其属性名称为attr，其第一个值以“value”为前缀。

来源

2016-05-12 15:22:48 Chad

感谢您的答案！我似乎返回null（我使用了部分解决方案1来解决这个问题）。难道是我设置类包含“一”与PHP？它** **成功地让该类包含字符串“one”，但是当我尝试console.log时，它不能给出id为null的错误。 – Wesley

已更新的答案，您需要'〜='而不是'^ ='。 – Chad

感谢您的帮助，这有效！非常感激！ – Wesley

获取类包含给定字符串的元素的ID

回答

相关问题