<button id="each">each</button>
<br>
<div id="box">
<button class="btn">Button-1</button>
<button class="btn">Button-2</button>
<button class="btn">Button-3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
#each {
padding: 10px;
margin-right: 8px;
margin-bottom: 18px;
background-color: tomato;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}
#box {
border: 1px solid black;
width: 180px;
padding: 20px;
}
.btn {
border: none;
padding: 10px;
width: 100%;
margin-bottom: 10px;
background-color: darkgrey;
color: #fff;
}
$(document).ready(function () {
$("#each").click(function () {
$("#box button").each(function () {
var text = $(this).text();
alert(text);
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.