jquery - 如何在不使用 for 循环的情况下更改多个 jQuery 选定对象的样式？

Question

基本上，我试图根据文本区域的行数来改变它的高度，这与问题无关，但这里是在不使用 for 循环的情况下向每个文本区域添加事件侦听器的编码：

$('textarea').keyup(function(event) {
    this.style.height = Math.floor(this.scrollHeight / 11) + '.1em';
});

这是我的 for 循环：

for (i=0; i<$('textarea').length; i++) {
    $('textarea')[i].style.height = Math.floor($('textarea')[i].scrollHeight / 11) + '.1em';
}

for 循环完美地工作，但只是为了简洁高效的编码，我希望它看起来更像是第一个编码，而不需要 for 循环。

另外，请注意，if 文档中的所有这些都是准备好的功能。

Answer 1

你可以试试each()方法：

$('textarea').each(function(){
     $(this).css('height', Math.floor(this.scrollHeight / 11) + '.1em')
})

jQuery.each()

Answer 2

我有点晚了，我同意最佳答案！+1

$('textarea').each(function(ele){
  ele.style.height = Math.floor(ele.scrollHeight / 11) + '.1em';
}};

Answer 3

$('textarea').keyup(function(event) {

    // change height of all textarea including current
    $('textarea').css('height', Math.floor(this.scrollHeight / 11) + '.1em');

    // But using this like following
    // will change height of current textarea

    // $(this).css('height', Math.floor(this.scrollHeight / 11) + '.1em');

});

Answer 4

$('textarea').keyup(function() {

      $("textarea").each(function () {
        this.height(Math.floor(this.scrollHeight / 11) + '.1em')

      });
    });

Answer 5

我想通过代码悖论来增强答案。

var jq_textarea = $('textarea');
jq_textarea.keyup(function(event) {
    jq_textarea.css('height', Math.floor(this.scrollHeight / 11) + '.1em');
});

基本上，它可以让您免于每次击键时的 DOM 遍历。