Question

在网页上，我要设置几个textarea元素的高度以匹配其内容。我尝试过不同的方法，比如

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所示。

如何确保页面上的每个textarea元素的高度都设置为适合加载的内容？

Answer 1

尝试使用.each() JQuery函数循环遍历所有textareas并结合选择器this以选择正确的textarea：

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

Answer 2

$("textarea").height会同时更改页面上所有 textareas的高度，因此您可以获得将它们全部设置为最后一个高度的效果。

如果你不混合使用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 3

null找到您网页上的所有textareas。因此，通过设置$("textarea")，它将设置所有的高度。因此，实际上只保留了最后的改变。

相反，我们可以遍历数组，只调整当前的textarea。这可以使用基本的javascript完成：

$("textarea").height

请参阅此fiddle。

我知道我的解决方案不像使用jQuery $(document).ready(function(){ var textareas = document.querySelectorAll('textarea'); for(var i = 0; i < textarea.length; i++){ textarea[i].style.height = textarea[i].scrollHeight + "px"; } });那样干净，但它易于理解，对于不使用jQuery的用户来说很不错。（但请注意，.each()应替换为$(document).ready(function() {

在加载时在javascript中设置多个textarea元素的高度

3 个答案: