将标头的值获取到数组中

Question

我有一些html，如下

<div class="xyz" >
<h1 class="abc>name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz" >
<h1 class="abc>name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>

我想将h1到h5中的每个值提取到一个数组中。我正在尝试$(".xyz")来获取每组头，但我如何处理下面的元素来获取值。我想到了.each(function(index, value)) {}等，但我只是不知道如何处理每个标头并获取值。

Answer 1

您可能需要一个更复杂的脚本来循环循环中的每个Header元素。考虑以下内容。

$(function() {
var myData = [];
$(".xyz").each(function(i, block) {
$(block).children().each(function(j, head) {
myData.push($(head).text());
});
});
console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz">
<h1 class="abc">name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz ">
<h1 class="abc">name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>

请记住，.each()传递的是一个Index和一个Element，而不是Value。不要与CCD_ 4混淆。

这将获取每个标头的文本内容，并将其推送到数组中。如果您有动态内容，或者可能没有每个子元素的Classes，这将非常有用。

您也可以这样做，利用每个元素上的类。

$(function() {
var myData = [];
$(".abc").each(function(i, head) {
myData.push($(head).text());
});
console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz">
<h1 class="abc">name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz ">
<h1 class="abc">name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>

同样的结果。

Answer 2

$( ".xyz" ).each(function( index ) {
console.log($( this ).text() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="xyz" >
<h1 class="abc>name1</h1>
<h2 class="abc">16.6164378</h2>
<h3 class="abc">86.74592325165001</h3>
<h4 class="abc">17.971746264000004</h4>
<h5 class="abc">30.706248577159997</h5>
</div>
<div class="xyz" >
<h1 class="abc>name2</h1>
<h2 class="abc">24.777777</h2>
<h3 class="abc">126.7654321</h3>
<h4 class="abc">67.678967969</h4>
<h5 class="abc">90.7689789159997</h5>
</div>