Question

这是html：

<div id="parent">
 <div id ="child1">
    <div id="subchild1">
        <input type="text" name="first" value="3">
    </div>
 </div>
 <div id ="child2">
    <div id="subchild2">
        <input type="text" name="second" value="7">
    </div>
 </div>
 <div id ="child3">
    <div id="subchild3">
        <input type="text" name="third" value="8">
    </div>
 </div>
</div>

<div id="result">

这是Jquery：

$(function(){
 var len = $('#parent > div').length;

 for(var i=0; i < len; i++){
    var a = $('#subchild'+ [i + 1]).find('input');
    $('#result').html(a);
 }
});

它始终是最后一个值。我尽我所能，但这是我能做的唯一代码。也许有人可以帮助我。

JS Fiddle

Answer 1

更改

$('#result').html(a);

到

$('#result').append(a);

.html（）替换了该元素中的所有内容，其中.append（）只是添加了已存在的内容。

Answer 2

$("[name='first']").each(function(){ alert(this.value) })

Answer 3

如果您想要的只是值，则以下内容会创建这些值的数组，并使用join()将它们分隔在目标div中：

var values = $('[id^=subchild] input').map(function(){
   return this.value;
}).get();

$('#result').html( values.join('<br>') );

的 DEMO

Answer 4

问题是你正在使用$('#result').html(a);，因为此代码将替换之前的值并仅采用最后的结果。请使用.append代替以下代码：

$(function () {
  var len = $('#parent > div').length;

  for (var i = 0; i < len; i++) {
    // get value of input text
    var a = $('#subchild' + [i + 1]).find('input').val();
    // every time got value, append those value into result element 
    // now input value available, see console
    console.log(a);
    $('#result').append(a);
  }
});

DEMO

Answer 5

您只看到最后一个结果的原因是因为您每次都将html等同而不是连接它。

$(function(){
 var len = $('#parent > div').length;

 for(var i=0; i < len; i++){
    var a = $('#subchild'+ [i + 1]).find('input');
    $('#result').append(a);
 }
});

小提琴：https://jsfiddle.net/1L5v4q3c/

Answer 6

这样的事情怎么样？ values包含所有3个值。

$(function() {
  var len = $('#parent > div').length;

  var values = [];
  for (var i = 0; i < len; i++) {
    var a = $('#subchild' + [i + 1]).find('input').val();
    values.push(a);
  }
  
  alert(values);
  $('#result').html(values.toString());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child1">
    <div id="subchild1">
      <input type="text" name="first" value="3">
    </div>
  </div>
  <div id="child2">
    <div id="subchild2">
      <input type="text" name="first" value="7">
    </div>
  </div>
  <div id="child3">
    <div id="subchild3">
      <input type="text" name="first" value="8">
    </div>
  </div>
</div>

<div id="result"></div>

如何在jquery中获取来自不同div的输入值？

6 个答案: