按可排序顺序获取所有文本区域内容

get all textarea content in sortable order

本文关键字：文本 区域 排序 顺序 获取      更新时间：2023-09-26

我想按可排序的顺序获取所有文本区域内容并插入其他文本区域：

选项 1： $（"div textarea"）.val（）;

选项 2： $（"div textarea"）.text（）;

问题：

选项 1：使用新输入更新 val，但仅从div #1 获取 val

选项 2：按可排序顺序获取所有内容，但不会使用新输入进行更新

代码：

$(function() {
$( "#sortable" ).sortable({
      out: function( event, ui ) {change();}
});
function change(){ 
         var content = "";
         $("#result textarea").empty();
         $("#sortable" ).sortable('toArray', {attribute: 'value'});           
         //content = $("div textarea").text(); // get all, but no update
         //content = $("div textarea").val(); // get only val from #1
         $("#result textarea").text(content); 
}
});
<ul id="sortable">
    <div id="1" value="1">
        <textarea rows="4" cols="50">01---</textarea>
    </div>
    <div id="2" value="2">
        <textarea rows="4" cols="50">02---</textarea>
    </div>
    <div id="3" value="3">
        <textarea rows="4" cols="50">03---</textarea>
    </div>
    <div id="4" value="4">
        <textarea rows="4" cols="50">04---</textarea>
    </div>
</ul>
    <div id="result" value="result">
        <textarea rows="4" cols="50"></textarea>
    </div>

将out更改为 stop ，因此更改将在排序停止时触发，这将调用更新列表，使用 content = $("div textarea").text(); 编写文本

$(function() {
  $("#sortable").sortable({
    stop: function(event, ui) {
      change();
    }
  });
  $("#sortable textarea").on('change keyup paste', change);
  function change() {
    var content = "";
    $("#result textarea").empty();
    $("#sortable").sortable('toArray', {
      attribute: 'value'
    });
    $("div textarea").each(function() {
      content += this.value;
    });
    $("#result textarea").text(content);
  }
});
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul id="sortable">
    <div id="1" value="1">
        <textarea rows="4" cols="50">01---</textarea>
    </div>
    <div id="2" value="2">
        <textarea rows="4" cols="50">02---</textarea>
    </div>
    <div id="3" value="3">
        <textarea rows="4" cols="50">03---</textarea>
    </div>
    <div id="4" value="4">
        <textarea rows="4" cols="50">04---</textarea>
    </div>
</ul>
    <div id="result" value="result">
        <textarea rows="4" cols="50"></textarea>
    </div>
</body>
</html>

我发现 .text（） 只更新一次明显地更新文本区域，所以 .val（） 是要走的路。输入文本区域，看到它不会更改 html，但会更改值。

也许您没有正确获取内容，因此请使用 console.log 进行测试。也许您需要遍历每个文本区域，并将 val 附加到您的内容变量中。

相关文章：