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');

循环中的内容仍在搜索整个dom。

使用

$(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”的元素。如果要在.percent-column元素内获取.inputdiv元素，请使用 .percent-column元素作为.inputdiv

的范围

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

jQuery .each仅查找第一个值

2 个答案: