divクラスの名前で配列に値を設定する方法

Question

私は4つのdivが同じクラスと次のような一意のIDを共有しているとしましょう。

<div id="Komori1" class="press"> 
<div id="Komori2" class="press"> 
<div id="PressD" class="press"> 
<div id="PressE" class="press"> 

そして、次のようなスクリプトで配列を作成します。

var pressArray =[] 

今私は私がこれを行うことができますどのように、HTMLのボディにクラス名「プレス」のすべてのインスタンスのID名で、この配列を移入しているしたいですか？

Answer 1

あなたはpressクラスに各要素をidさん

var pressArray = $('.press').map(function() { 
 
    return this.id; 
 
}).get(); 
 

 
console.log(pressArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press">

Answer 2

ループの配列を取得し、pressArray変数にそのIDをプッシュするmap()とget()メソッドを使用することができます。あなたはクラスpressを持つ要素をループするforループを使用することができ、単なるJavaScriptで

var pressArray = []; 
 
$(".press").each(function(i) { 
 
    pressArray.push(this.id); 
 
}); 
 
alert(pressArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press">

。

var pressArray = []; 
 
for(var i=0, n=document.getElementsByClassName("press"); i<n.length; i++) { 
 
    pressArray.push(n[i].id); 
 
}; 
 
alert(pressArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press">

Answer 3

var pressArray =[]; 
 

 
$(".press").each(function() { 
 
    pressArray.push($(this).attr('id')); 
 
}); 
 

 
$(".result").html(pressArray.toString());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press"> 
 

 
    
 
<div class="result"></div>

Answer 4

ここではどのようにjQueryなしだ：

pressArray = []; 
 
[].slice.call(document.querySelectorAll('.press')).forEach(function(el) { 
 
    pressArray.push(el.id) 
 
}); 
 
document.write(pressArray);

<div id="Komori1" class="press"></div> 
 
<div id="Komori2" class="press"></div> 
 
<div id="PressD" class="press"></div> 
 
<div id="PressE" class="press"></div>

Answer 5

簡単に、すべて.press要素を取得し、id値を配列にマップします。

非jQueryの：

var pressEls = document.querySelectorAll('.press'); 
 
var pressArray = [].map.call(pressEls, function(el) { 
 
    return el.id; 
 
}); 
 

 
alert(pressArray);

<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press">

のjQuery：

var $pressEls = $('.press'); 
 
var pressArray = $pressEls.map(function() { 
 
    return this.id; 
 
}).get(); 
 

 
alert(pressArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Komori1" class="press"> 
 
<div id="Komori2" class="press"> 
 
<div id="PressD" class="press"> 
 
<div id="PressE" class="press">