javascript - 如何使用选择器使用Jquery在DOM下获取值

Question

我有一个像 as 这样的 html 容器结构

<div class='APart'>
 <div class='Main'>
  <input name='MainInput' value='1'>
 </div>
 <div class='Sub'>
  <input name='SubInput' value='2'>
  <input name='SubInput' value='5'>
 </div>
</div>
<div class='APart'>
 <div class='Main'>
  <input name='MainInput' value='3'>
 </div>
 <div class='Sub'>
  <input name='SubInput' value='4'>
  <input name='SubInput' value='6'>
 </div>
</div>

我使用 Jquery 执行 foreach 并获取数据

$('.APart input[name=MainInput]').each(function(index, element) {
 console.log(this.value)
});

现在我知道如何获取 MainInput 值，下一步如何获取 SubInput 值？

这是我的预期结果

数组[0] = "1,2,5"

数组[1] = "3,4,6"

Answer 1

在您的输入 dom 上添加一个新的类标签

<div class='APart'>
 <div class='Main'>
  <input class=''MainClass' name='MainInput' value='1'>
 </div>
 <div class='Sub'>
  <input class=''SubClass' name='SubInput' value='2'>
  <input class=''SubClass' name='SubInput' value='5'>
 </div>
</div>
<div class='APart'>
 <div class='Main'>
  <input class=''MainClass' name='MainInput' value='3'>
 </div>
 <div class='Sub'>
  <input class=''SubClass' name='SubInput' value='4'>
  <input class=''SubClass' name='SubInput' value='6'>
 </div>
</div>

所以下一步我们可以像这样选择器类

$('.APart').each(function(index, element) {
    $(this).children('.Main').find('.MainClass').each(function (i,e){
        console.log($(e).val())
    });
    $(this).children('.Sub').find('.SubClass').each(function (i,e){
        console.log($(e).val())
    });
});

这段代码做的事情

1. 获取每个 APart 类

2. 在查找下一个子类之后获取 APart DOM 数据

3. 然后我们只需要使用选择器找到新的类组就可以找到它