多重迭代使用jquery

Question

多样输入元件我使用MVC3剃刀用以下标记：

<div class="budget"> 
<!--line item--> 
<div class="budget-row"> 
    <div class="row"> 
     <div class="twelve columns"> 
      <div class="row"> 
       <div class="two mobile-one columns"> 
       <label class="right inline">Item:</label> 
       </div> 
       <div class="ten mobile-three columns"> 
       @Html.TextBox("description[]", "", new { @class = "expand" }) 
       </div> 
      </div> 
      <div class="row"> 
       <div class="two mobile-one columns"> 
       <label class="right inline">Cost:</label> 
       </div> 
       <div class="two mobile-one columns field-left"> 
       @Html.TextBox("amount[]", "0", new { @class = "expand" }) 
       </div> 
       <div class="one mobile-one columns"> 
       <label class="right inline">Markup:</label> 
       </div> 
       <div class="one mobile-one columns field-left"> 
       @Html.TextBox("markup_amount[]", "0", new { @class = "expand" }) 
       </div> 
       <div class="one mobile-one columns field-left"> 
       <select id="markup_type[]" style="display:none;"> 
       <option value="P" SELECTED>%</option> 
       <option value="D">$</option> 
       </select> 
       </div> 
      </div> 
     </div> 
    </div><!--row-->  
</div> 
<!--end line item--> 

    <a class="button radius small success middle" href="#" id="submit">Submit</a> 
</div> 

的“预算” DIV是整体的div时，“预算排”分区可以是一个或多个线。我正在寻找一个迭代捕获每个输入的值。我试过这个：

$("#submit").click(function() { 
    $(".budget input[type=text]").each(function() { 
     alert(this.value); 
    }); 
    return false; 
}); 

坦率地说，尝试了很多东西，在这一点上可能不是很接近。而且这只会返回我的文本框。

感谢

编辑 这将输出代码：

<div class="budget"> 
<!--line item--> 
<div class="budget-row"> 
    <div class="row"> 
     <div class="twelve columns"> 
      <div class="row"> 
       <div class="two mobile-one columns"> 
        <label class="right inline">Item:</label> 
       </div> 
       <div class="ten mobile-three columns"> 
        <input class="expand" id="description__" name="description[]" type="text" value="" /> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="two mobile-one columns"> 
        <label class="right inline">Cost:</label> 
       </div> 
       <div class="two mobile-one columns field-left"> 
        <input class="expand" id="amount__" name="amount[]" type="text" value="0" /> 
       </div> 
       <div class="one mobile-one columns"> 
        <label class="right inline">Markup:</label> 
       </div> 
       <div class="one mobile-one columns field-left"> 
        <input class="expand" id="markup_amount__" name="markup_amount[]" type="text" value="0" /> 
       </div> 
       <div class="one mobile-one columns field-left"> 
        <select id="markup_type[]" style="display:none;"> 
         <option value="P" SELECTED>%</option> 
         <option value="D">$</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div><!--row-->  
</div> 
<!--end line item--> 

<a class="button radius small success middle" href="#" id="submit">Submit</a> 
</div> 

Answer 1

这是我想出了让你选择的值。不知道这是你所需要的，还是更多。

<div class="row"> 
    <div class="two mobile-one columns"> 
     <label class="right inline">Cost:</label> 
    </div> 
    <div class="two mobile-one columns field-left"> 
     <input type="text" value="1" class="first" /> 
    </div> 
    <div class="one mobile-one columns"> 
     <label class="right inline">Markup:</label> 
    </div> 
    <div class="one mobile-one columns field-left"> 
     <input type="text" value="2" class="second" /> 
    </div> 
    <div class="one mobile-one columns field-left"> 
     <select id="markup_type[]" class="first"> 
      <option value="A" SELECTED>%</option> 
      <option value="B">$</option> 
     </select> 
    </div> 
    <div class="one mobile-one columns field-left"> 
     <select id="test_type[]" class="second"> 
      <option value="Z" SELECTED>%</option> 
      <option value="Y">$</option> 
     </select> 
    </div> 
</div> 

$(document).ready(function() { 
    $("#submit").click(function() { 
     $("select :selected").each(function(){ 
      alert($(this).val()); 
      //get the corresponding input for this select 
      var cName = $(this).parent().attr("class"); 
      var div = $(this).closest(".row"); 
      var input = $("." + cName, div); 
      alert($(input).val()); 
     }); 
     return false; 
    }); 
}); 

您可以查看fiddle here。

请注意，我们正在使用类绑定select到输入。在这个例子中，我用class =“first”标记了输入，用class =“first”标记了输入以将它们连接在一起。

让我知道这是否适用于你。