Как получить индекс элемента по уникальному классу "active"?

Question

У меня есть очень простой код для получения информации об активном div с активным именем класса. В настоящее время я пытаюсь получить его индекс между коллекцией div с именем класса slide. Однако я попробовал много селекторов без пользы. Итак, мне нужна твоя помощь.

CSS

<style type="text/css">

.slide {
    width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
    text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>

HTML

<div style="text-align:center">
    <input id="get_info" type="button" value="<<>>" /> 

    <br />
        <div style="display:inline-block">
            <div class="slide ">0</div>
            <div class="slide">1</div>
            <div class="slide active">2</div>
            <div class="slide">3</div>
        </div>
    <br />
    <p id="msg"></p>
</div>

jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        var nxt = 0;
        var prv = 0;
        var crnt = 0;

        $("#get_info").click(function () {
            crnt = $(".slide").index(".slide .active");
            $('#msg').html(crnt);
        });

    });
</script>

Как показано все, что мне нужно, чтобы получить «активный» индекс позиции между «слайдом». Постоянный результат для этого -1.

Answer 1

Вы можете получить это так:

$(document).ready(function() {   
  $("#get_info").click(function() {
    let crnt = $(".slide").index($(".slide.active"));
    $('#msg').html(crnt);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
    <input id="get_info" type="button" value="<<>>" /> 

    <br />
        <div style="display:inline-block">
            <div class="slide ">0</div>
            <div class="slide">1</div>
            <div class="slide active">2</div>
            <div class="slide">3</div>
        </div>
    <br />
    <p id="msg"></p>
</div>