jQuery .each найти только первое значение - PullRequest
Новая
       7

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

0 голосов
/ 02 октября 2018

Я работаю над простым скриптом 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

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

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

$(document).ready(function(){     
   $('.percent-column').each(function(){
       var findValue = $('.inputdiv', $(this)).attr('data-value');
       ///...
   });
});
0 голосов
/ 02 октября 2018 
$('.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>
...