输入后如何查找textarea值

Question

如何在输入后获取textarea的值，而不是在jQuery的同一div中？我尝试使用foreach和find方法。我需要获取值并分配给JS对象。

<div id="txtall">
<div class="subdiv">
    <input type = "text" value = "firstInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea"> firsttextareavalue </textarea>

<div class="subdiv">
    <input type = "text" value = "secondInput" class= "subinput">
</div>
<textarea class="textarea" class="subTextarea" /></textarea>

<div class="subdiv">
    <input type = "text" value = "thirdInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea" />second may be empty</textarea>

<div class="subdiv">
    <input type = "text" value = "forthInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea" />last text area value</textarea>

当我点击一个按钮时，我需要获得价值。

$('#txtall').find('.subinput').each(function() {
    console.log(this.value);
    console.log($(".subtextarea",this).val());
});

输出必须是：

  

  
• firstInput
  
• firsttextareavalue
  
• secondInput
  
• （这应该是空的）
  
• thirdInput
  
• 第二个可能是空的
  
• forthInput
  
• 最后文字区域值
  

我还必须为JS对象赋值。

function newObject(input,textarea)
{
 this.input = input;
 this.textarea = textarea;
}
var list = [];
$('#txtall').find('.subinput').each(function() {
  var obj_1 = new newObject();
  obj_1.input = this.value;
   obj_1.textarea = $(".subtextarea",this).val();
  list.push(obj_1);
});

顺便说一下，我需要使用this，我不能为每个输入或textarea分配不同的id或类。

Answer 1

textarea在输入之后，因此它是来自父next()

的.subdiv元素

$('#txtall').find('.subinput').each(function() {
    console.log( this.value );
    console.log( $(this).closest('.subdiv').next('.subtextarea').val() );
});

当您执行$(".subtextarea",this)时，$(this).find(".subtextarea")与var list = $('#txtall').find('.subinput').map(function() { return { input : this.value, textarea : $(this).closest('.subdiv').next('.subTextarea').val() } }).get(); console.log(list)相同，后者只会找到后代，输入不会有后代。

请注意，您的HTML 无效，您只能拥有一次class属性，并且您不应该两次关闭textareas

这里也没有理由在这里创建实例，你可以只映射元素

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="txtall">
  <div class="subdiv">
    <input type="text" value="firstInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea"> firsttextareavalue </textarea>

  <div class="subdiv">
    <input type="text" value="secondInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea"></textarea>

  <div class="subdiv">
    <input type="text" value="thirdInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea">second may be empty</textarea>

  <div class="subdiv">
    <input type="text" value="forthInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea">last text area value</textarea>
</div>

＆＃13;

p.start_timestamp AT TIME ZONE p.timezone >= to_date('2017-09-30','YYYY-MM-DD') +  INTERVAL '2 day' 

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用此代码 $（this）.parent（）。next（）。val（）; 它将获得输入父级旁边的textarea。

function newObject(input,textarea)
{
 this.input = input;
 this.textarea = textarea;
}
var list = [];
$('#txtall').find('.subinput').each(function() {

  var obj_1 = new newObject();
  obj_1.input = this.value;
   obj_1.textarea = $(this).parent().next().val();
  list.push(obj_1);
});

Working Fiddle

Answer 3

使用.next()转到父DIV之后的下一个元素。

function newObject(input, textarea) {
  this.input = input;
  this.textarea = textarea;
}
$("#button").click(function() {
  var list = [];
  $('#txtall').find('.subinput').each(function() {
    var input = this.value;
    var textarea = $(this).closest(".subdiv").next(".subTextarea").val();
    var obj_1 = new newObject(input, textarea);
    list.push(obj_1);
  });
  console.log(list);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="txtall">
  <div class="subdiv">
    <input type="text" value="firstInput" class="subinput">
  </div>
  <textarea class="subTextarea"> firsttextareavalue </textarea>

  <div class="subdiv">
    <input type="text" value="secondInput" class="subinput">
  </div>
  <textarea class="subTextarea" /></textarea>

  <div class="subdiv">
    <input type="text" value="thirdInput" class="subinput">
  </div>
  <textarea class="subTextarea" />second may be empty</textarea>

  <div class="subdiv">
    <input type="text" value="forthInput" class="subinput">
  </div>
  <textarea \class="subTextarea" />last text area value</textarea>
</div>
<button id="button">Click me</button>

Answer 4

$('#txtall').find('.subinput').each(function() {
  console.log( this.value );
  console.log( $(this).closest('.subdiv').next('textarea').val() );
});