<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

    <button id="each">each</button>
    <button id="to-array">toArray</button>
    <br>
    <div id="box">
        <button class="btn">Tıkla - index (0)</button>
        <button class="btn">Tıkla - index (1)</button>
        <button class="btn">Tıkla - index (2)</button>
    </div>

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

</html>
body {
    margin: 20px;
    font-size: 18px;
}

#each,
#to-array {
    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);
        });
    });

    $("#to-array").click(function() {
        var array = $("#box button").toArray();
        for(i = 0; i< array.length; i++){
            alert(array[i].innerHTML);
        }
    });

    $("#box button").click(function() {
        var result = $(this).index();
        alert(result);
    });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.