Question

我有一个具有多个输入字段的div。我的HTML看起来像这样：

<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" onclick="getAllValues();" />

点击图片后，必须获取mainDiv内的所有值。我怎么能这样做？

Answer 1

＆＃13;

$("#getallvalues").click(function() {

  var values = $("#mainDiv input").map(function() {
    return $(this).val()
  }).get().join(",");

  console.log(values)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />

＆＃13;

循环浏览每个输入，然后获取值并使用.map()

＆＃13;

var price = 0;
var tax = 0;
var others = 0;
$("#getallvalues").click(function() {

  $("#mainDiv input").each(function() {
    if ($(this).attr("id") == "price") {

      price = $(this).val()

    }
    if ($(this).attr("id") == "tax") {

      tax = $(this).val()

    }

    if ($(this).attr("id") == "others") {

      others = $(this).val()

    }

  })

  console.log("price " + price)
  console.log("tax " + tax)
  console.log("others " + others)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
  <input type="text" id="price" /> <br/>
  <input type="text" id="tax" />
  <input type="text" id="others" />
</div>
<img src="img/img.gif" id="getallvalues" />

＆＃13;

Answer 2

您可以使用.map()迭代元素并在回调中返回值以及.get()以将它们放入数组中：

function getAllValues(){
  $('#mainDiv input').map({
     return this.value;
  }).get();  // Output: ["priceval","taxval","otherval"]
}

您可以使用上面的数组以您想要进一步处理的格式（csv，json等）创建数据。

Answer 3

遍历mainDiv中的所有输入

$('#mainDiv input').each(function(){
// Do what ever
})

Answer 4

另一种方法如下：

$('#mainDiv').find('input').each(function (index, element) { var yourValue = element.value; // or $(element).val(); // And rest of your code });

Answer 5

$('#mainDiv input').each(function(){
   console.log(this.val());
})

获得Div内的所有价值

5 个答案: