Question

我有一个模态，有几个checkbox。这些复选框在选中（标记）时会收到一个class。

我需要获取所有带有标记id的{{1}}。我该怎么办？

我尝试了以下代码，但未成功：

class

Answer 1

您可以使用.each()进行迭代并将其添加到您的数组中：

var test = $('.marked');
var arr = [];

$(test).each((idx, el) => arr.push($(el).attr('id')));

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="marked" id="1"></div>
<div class="marked" id="2"></div>
<div class="notmarked" id="3"></div>

更简单的是，您可以只使用内部.map()函数，并使用.get()将其转换为漂亮的数组：

var arr = $('.marked').map((idx, el) => $(el).attr('id')).get();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="marked" id="1"></div>
<div class="marked" id="2"></div>
<div class="notmarked" id="3"></div>

Answer 2

var test = $('.marked');
console.log( test.map((index, element) => element.id).get() );

使用map()获取所有ID，然后使用get()将其转换为简单数组。

Answer 3

您可以使用.map()：

var ids = $(".marked").map(function() {
  return this.id;
}).get();
console.log(ids.join(","))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox' checked class='marked' id='m1' />
<input type='checkbox' checked class='marked' id='m2' />
<input type='checkbox' id='m3' />
<input type='checkbox' id='m4' />
<input type='checkbox' checked class='marked' id='m5' />

Answer 4

如果您想使用普通的javascript：

var elements = document.getElementsByClassName("marked");
var arr = [];
for(el of elements) {
    if(el.id) { //make sure the element has an id
    arr.push(el.id);
  }
}

您还可以使用一些技巧来使用Array.map：

var elements = document.getElementsByClassName("marked");
var arr = Array.prototype.map.call(elements, function(el){
    if(el.id) return el.id;
});

Answer 5

您可以使用css选择器并将其包装在Array.from中，以将其从NodeList转换为实际数组。然后，您可以在该数组上调用map以创建一个包含每个元素id的新数组：

var markedElementIds = Array.from(document.querySelectorAll("div[class='marked']")).map(el => el.id)
console.log(markedElementIds);

<div class="marked" id="1"></div>
<div class="marked" id="2"></div>
<div class="notmarked" id="3"></div>
<div class="marked" id="4"></div>

以选择器作为类获取ID数组

5 个答案: