Question

是否可以从某些类中获取id值？这是我的clear.html

<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

这里是clear.js

$(document).ready(function(){
    var curLoadProv = document.querySelector('.number').id;
    console.log(curLoadProv)
});

但它只是打印1，如何打印2和3？

Answer 1

非jQuery回答：

document.addEventListener("DOMContentLoaded", function() {
  var numbers = document.querySelectorAll('.number');
  Array.protoype.forEach.call(numbers, function(number) {
    console.log(number);
  });
}, false);

Answer 2

如果要单独打印，请使用each

＆＃13;

$('.number').each(function() {
  console.log($(this).attr('id'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

＆＃13;

如果您想在阵列中使用它们，请使用map

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

＆＃13;

Answer 3

以下代码将返回一个数组，其中包含具有类.number的所有元素的ID：

$('.number').map(function() { return this.id; }).get();  // ["1", "2", "3"]

以下代码将使用类.number迭代所有元素，并将其ID输出到控制台：

$('.number').each(function() {
    console.log( this.id );
});

＆＃13;

$('#first').text(
  $('.number').map(function() { return this.id; }).get()
);

$('.number').each(function() {
  $('#second').append(this.id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

<div id="first"></div>
<div id="second"></div>

＆＃13;

Answer 4

问题是document.querySelector()将仅返回满足给定选择器的第一个元素。

由于您似乎正在使用jquery，因此使用带有类选择器的jQuery来获取具有类号的所有元素，然后使用.each（）迭代它并记录每个元素的id

$(document).ready(function() {
  $('.number').each(function() {
    snippet.log(this.id)
  })
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="number" id="1">Number 1</p>
<p class="number" id="2">Number 2</p>
<p class="number" id="3">Number 3</p>

Answer 5

我们可以根据id

获取值

var value = document.getElementById（“id”）。innerhtml;

Answer 6

$(document).ready(function(){
    $(".number").each(function() {
        console.log($(this).attr('id'));
    });
});

Answer 7

使用下面的代码段。

$(document).ready(function(){
    var elements = document.querySelectorAll('.number');
    for(var i = 0; i<elements.length; i++){
          console.log(elements[i].id);
    }
});

从多个类中获取id值

7 个答案: