jQuery获取每个div容器和子类的值

Question

我有以下HTML代码：

<div class="container">
   <input class="class1" value="class1Text" />
   <span class="class2">class2Text</span>                                                                               
</div>

<div class="container">
   <input class="class1" value="class1Text" />
   <span class="class2">class2Text</span>                                                                               
</div>

<div class="container">
   <input class="class1" value="class1Text" />
   <span class="class2">class2Text</span>                                                                               
</div>

这是我的jQuery代码来获取每个.container：

$( ".container" ).each(function() { 
   // DO SOMETHINGS
})

但是如何获取每个容器的class1和class2的值和文本形式？

Answer 1

使用$.*[\]^和this这样的组合：

.find()

$(".container").each(function() {
  console.log($(this).find('.class1').val());
  console.log($(this).find('.class2').text());
})

Answer 2

你需要两个jQuery方法。

.each - 迭代元素数组中的每个元素。

.children - 在迭代中获取当前元素的子元素。

＆＃13;

＆＃13;

$(".container").each(function() {
    console.log($(this).children('.class1').val());
    console.log($(this).children('.class2').text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input class="class1" value="class1Text" />
  <span class="class2">class2Text</span>
</div>

<div class="container">
  <input class="class1" value="class1Text" />
  <span class="class2">class2Text</span>
</div>

<div class="container">
  <input class="class1" value="class1Text" />
  <span class="class2">class2Text</span>
</div>

＆＃13;

＆＃13;

＆＃13;