JavaScriptの複数のテキストエリア要素の高さの設定

Question

ウェブページでは、内容に合わせていくつかのテキストエリアの高さを設定します。私は

var textarea = document.querySelectorAll('textarea'); 

$(document).ready(function(){ 
    for(var i = 0; i < textarea.length; i++){ 
    console.log("textarea="+textarea[i]); 
    $("textarea").height($("textarea")[i].scrollHeight); 
} 
}); 

のようなさまざまなアプローチを試みた。しかし、これはhereを見ることができるように最後の要素の高さへの最初の要素の高さを設定します。

ページ上のすべてのテキストエリア要素の高さがコンテンツの読み込みに合うように設定するにはどうすればよいですか？したがって、同時にページ上すべてテキストエリアの高さを変更します

$(function(){ 
    $('textarea').each(function(){ 
     $(this).height($(this)[0].scrollHeight); 
    }); 
}); 

Answer 1

は右textareaを選択するセレクタthisと組み合わせて、すべてのテキストエリアをループに.each() jQueryの機能を使用してみてくださいなぜあなたは最後のものの高さにそれらをすべてセットするという効果を得ているのですか？

あなたはjQueryとJSの構文を混在しない場合、それは簡単です：

var textAreas = $("textarea"); //get textAreas as a jQuery object 

//loop through all the jQuery textarea objects 
textAreas.each(function(index, element) { 
    var textArea = $(this); //select only the current textArea in the loop 
    textArea.height(textArea.get(0).scrollHeight); //.get(0) gets the underlying HTML element which has the scrollHeight property 
}); 

Answer 2

$("textarea").height：

Answer 3

$("textarea")は、ページ上のすべてのテキストエリアを検索します。したがって、$("textarea").heightを設定すると、すべての高さが設定されます。したがって、最後の変更のみが実際に保持されます。

代わりに、配列をループして、現在のテキストエリアのみを適用することができます。これは、基本的なJavaScriptで行うことができます：

$(document).ready(function(){ 
    var textareas = document.querySelectorAll('textarea'); 
    for(var i = 0; i < textarea.length; i++){ 
     textarea[i].style.height = textarea[i].scrollHeight + "px"; 
    } 
}); 

fiddleでこれをご覧ください。

私のソリューションは、jQueryの.each()を使用するのと同じくらいクリーンではありませんが、わかりやすく、jQueryを使用しないユーザーには便利です。ただし、$(document).ready(function() {はdocument.addEventListener("DOMContentLoaded", function(e) {

に置き換えてください。