jQuery .each найти только первое значение

Question

Я работаю над простым скриптом jQuery, который будет принимать значения из атрибутов данных столбцов и выводить их в виде массива. Я могу получить только код, повторяющий первое значение.

Вот мой HTML:

<div class="wrapper">
    <div class='percent-column'>
        <div class="inputdiv" data-value="67">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>

    <div class='percent-column'>
        <div class="inputdiv" data-value="34">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>

    <div class='percent-column'>
        <div class="inputdiv" data-value="93">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>
</div>

И мой JQuery:

$(document).ready(function(){     
        $('.percent-column').each(function(){
                var findValue = $('.inputdiv').attr('data-value');
                var valArray = [];
                valArray.push(findValue);
                console.log(valArray);
        });
});

Это выводит 67 67 67

Answer 1

$('.inputdiv').attr('data-value');

в цикле все еще ищет весь дом.

использование

$(this).find('.inputdiv').attr('data-value');

для текущей итерации цикла.

$(document).ready(function(){     
        $('.percent-column').each(function(){
                var findValue = $(this).find('.inputdiv').attr('data-value');
                var valArray = [];
                valArray.push(findValue);
                console.log(valArray);
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class='percent-column'>
        <div class="inputdiv" data-value="67">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>

    <div class='percent-column'>
        <div class="inputdiv" data-value="34">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>

    <div class='percent-column'>
        <div class="inputdiv" data-value="93">
            <input type="text" placeholder="Enter a Number" value="25"/>
            <button class="btn_output">Click to Show Output</button>
        </div>


        <div class="progress">
                <div class="bar"></div>
        </div>
        <div class="output"></div>
    </div>
</div>

Answer 2

$('.inputdiv') находит все элементы с class="inputdiv". Если вы хотите получить элемент.inputdiv внутри элемента.percent-column, используйте элемент.percent-column в качестве области при поиске.inputdiv

$(document).ready(function(){     
   $('.percent-column').each(function(){
       var findValue = $('.inputdiv', $(this)).attr('data-value');
       ///...
   });
});