输入后如何查找textarea值答案

【问题标题】：How to find textarea value after input输入后如何查找textarea值
【发布时间】：2023-03-23 23:59:01
【问题描述】：

如何在输入后获取文本区域的值，但与 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());
});

输出需要是：

第一个输入

第一个文本区域值

第二输入

（这应该是空的）

第三个输入

秒可能为空

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，而且我不能为每个输入或文本区域分配不同的 id 或类。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

文本区域出现在输入之后，所以它是来自父.subdiv的next()元素

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

$(".subtextarea",this) 与 $(this).find(".subtextarea") 相同，只会查找后代，输入没有后代。

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

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

var list = $('#txtall').find('.subinput').map(function() {
  return {
    input    : this.value, 
    textarea : $(this).closest('.subdiv').next('.subTextarea').val()
  }
}).get();

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="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>

【讨论】：

。感谢您的解释和地图功能。这似乎更有效的方式。我不能在另一个中使用类属性吗？
您发布的代码中没有任何内容表明您需要对任何东西进行原型设计或使用实例。您可以将值推送到数组，或将它们映射到上面的数组，而无需每次都创建新实例
实际上我需要发布 mycontroller(mvc c# project) 而我的方法是 "public void save(int id,ListmyList)" ，这就是我使用实例的原因。我可以像 newObject 实例一样映射吗？
是的，您不需要实例来存储您要发布的数据

【解决方案2】：

使用.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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个代码使用 $(this).parent().next().val(); 它将获得输入父级旁边的文本区域。

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

【讨论】：