是否有一个 JS/jQuery 函数可以获取具有特定类的每个元素的 id？

Question

我有 4 个 html 输入元素：

<input type="checkbox" class="viewButton" id="html-button"> 
<input type="checkbox" class="viewButton" id="css-button">  
<input type="checkbox" class="viewButton" id="javascript-button">   
<input type="checkbox" class="viewButton" id="output-button">

我想做的是用“viewButton”类获取每个元素中每个id的名称，并将它们放入一个数组中。

为了做到这一点，我写了这个：

var viewButtonsArray = [];
viewButtonsArray.push($(".viewButton"));


var buttonIdsArray = [];
for (var i = 0; i < viewButtonsArray[0].length; i++) {
     buttonIdsArray.push(viewButtonsArray[0][i].id);
}

代码有效。但是，我想知道是否有更简单的方法可以做到这一点。

谢谢！

（我不认为这是重复的。被声明为重复的链接解决了有关另一个元素中的元素的问题，父级具有类，子级具有 id。我的问题是关于具有 BOTH a class 和 id，因此标题为“具有某个类的每个元素的 id”，而不是“具有某个类的父元素中的元素的 id”。）

Answer 1

您可以使用 map() 和 get() DEMO 来做到这一点

var viewButtonsArray = $('.viewButton').map(function() {
  return $(this).attr('id');
}).get();

console.log(viewButtonsArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="viewButton" id="html-button"> 
<input type="checkbox" class="viewButton" id="css-button">  
<input type="checkbox" class="viewButton" id="javascript-button">   
<input type="checkbox" class="viewButton" id="output-button">

Answer 2

你可以使用：

var ary = [];
$('.viewButton').each(function(){ ary.push(this.id) })