javascript - 获取每个 div 的所有选择值，其中多个 div 具有相同的类名

Question

当有多个具有相同类名的 div 时，是否有一种方法可以获取具有特定类名的 div 内所有选定值的数组？

<div class="mydiv">
<select name="first">
     <option value="1">One</option>
     <option value="2">Two</option>
</select>
<select name="second" ">
     <option value="1">One</option>
     <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
     <option value="1">One</option>
     <option value="2">Two</option>
</select>
<select name="second" ">
     <option value="1">One</option>
     <option value="2">Two</option>
</select> </div>

如果我这样做:$(".mydiv").each(function (){ });

我将循环(总共两次，因为我有两个带有 mydiv 类的 div)通过这两个 div，这就是我想要的。现在我想为每个选择(第一个和第二个)获取每个 div 中的选定值。

Answer 1

您可以使用 map() 。

以下假设您想要每个 <div> 都有一个子数组

let res = $('.mydiv').map(function(){
    return [$(this).find('select').map(function(){
        return $(this).val()
    }).get()]
}).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
  <select name="first">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
  </select>
  <select name="second">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
</div>

<div class="mydiv">
  <select name="first">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
  <select name="second">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
</div>

对于平面数组只需执行以下操作:

let res = $('.mydiv select').map(function(){
   return $(this).val();
}).get();