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

在循环中仍在搜索整个 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');
///...
});
});