使用 data-attribute 遍历 div 中的每个 child

Question

我有多个 <div>，基于 <select>，其中每个都包含多个 <input>，有时还包含一个具有固定值的禁用 <select>。现在我试图遍历每个 divs 并将所有输入和 select 值放入 array 并将该数组推入 "master"数组。

然而这似乎不太奏效。
我觉得我已经接近但到目前为止。 :(

var dummy = [];
    for(var i = 1; i <= toSend.count; i++){
        var temp = [];
        $("div[data-row="+i+"]").children('input, select').each(function(){
            temp.push( $(this).val() );
        });

        dummy.push(temp);
    };

    console.log(dummy);

toSend.count 是对 div 和 data-row 存在的计数。
HTML 看起来像这样：

<div id="container">
   <div data-row="1">
      <input type="text"/>
      <input type="text"/>
   </div>
   <div data-row="2">
     <input type="text"/>
     <input type="text"/>
  </div>
</div>

啊哈，算了，这是我自己的蠢事！我正在通过 AJAX
生成 div 我自己复制粘贴了一个错误。
所有 div 都有 data-row=1，难怪它全部打包在一个数组中 >。<

Answer 1

您想要实现的目标的简短代码。

$("div[data-row="+i+"]")each(function(){ 
    $(this).children('input, select').each(function(){
        console.log(  $(this).val());
        console.log("Child Change");
    });
      console.log("Div Change");
});

Answer 2

。jquery 中的每个函数都不是同步的，请改用 for。

var $tmp;

for(var i = 1; i <= toSend.count; i++)
{
     $tmp = $("div[data-row="+i+"]").children('input, select');

     for(var ii = 1,len = $tmp.length; ii <= len; ii++){
        console.log(  $tmp.eq(ii).val());
     };

     console.log("New line #" + i);
};

Answer 3

（编辑：付费阅读代码更完整）

由于 toSend 变量只是具有 data-row 属性的 DIV，因此无需循环 toSend 来查找 DIV：

var dummy = [];

$("#container div[data-row]").each(function() {
    var temp = [];

    $(this).children("input, select").each(function() {
        temp.push(this.value);
    });

    dummy.push(temp);
});

在此之后，您甚至可能根本不需要 toSend 变量。

使用 data-attribute 遍历 div 中的每个 child

Loop through each child in a div with data-attribute

javascript

arrays

jquery

custom-data-attribute