javascript - 将包含 4 个元素的不同类名收集到 JSON 字符串中

Question

我有一些从 r1 到 r10 的类名。在一行中，我有 4 个选择选项。如下所示:

                           <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyO" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        onmouseover="this.size=this.options.length"
                                        onmouseout="this.size=1" onchange="this.size=1"  name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr>

我有 10 行像这样。我想将 r1 到 r10 处的所有元素收集到一个 JSON 字符串中，就像

[
   r1: 4,2,3,1;
   r2: 2,1,3,4;
    .....
    .....
   r10: 2,1,4,3;
]

如何通过循环使用 javascript 或 jquery 方法获取它？因为如果用户输入了答案，我就使用它们将其放回到我的问题输入中。

Answer 1

我猜您可能正在寻找的对象会是这样的

{
   r1: [4,2,3,1],
   r2: [2,1,3,4],
    .....
    .....
   r10: [2,1,4,3]
}

由于您提到的对象无效，您可以使用 .each() 循环遍历所有 select 及其内部的选项，例如

$(function(){
 $('#btn').click(function() {
  var res = {};
  console.log($('#tab').find('tr'))
  $('tr').each(function(){
      var tmp = [];
      var cl ;
      $(this).find('select').each(function(){
        cl = $(this).attr('class');
        console.log(cl);
        tmp.push($(this).val());
      })
      
      res[cl] = tmp
  })
  console.log(res);
 })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div>   <table id="tab"> <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r1" style="position: absolute; z-index:9999;"
                                        >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r1" style="position: absolute; z-index:9999; "
                                        name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="info" id="alertr1">
                                <td width="30px">1</td>
                                <td width="200px">Likes Authority</td>
                                <td  width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999;"  name="qtyL" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="200px">Enthusiastic</td>
                                <td  width="75px;"> 
                                    <select class="r2" style="position: absolute; z-index:9999;"
                                        name="qtyO" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td width="200px">Sensitive Feelings</td>
                                <td width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999; "  name="qtyG" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                                <td  width="180px">Likes Instructions</td>
                                <td width="75px;">
                                    <select class="r2" style="position: absolute; z-index:9999; "  name="qtyB" >  
                                        <option value="0">-</option>
                                        <option value="1" >1</option>
                                        <option value="2" >2</option>
                                        <option value="3" >3</option>
                                        <option value="4" >4</option>
                                    </select>
                                </td>
                            </tr></table>
                            </div>
   <button id="btn">click</button>