【问题标题】:jquery .val() += idiomjquery .val() += 成语
【发布时间】:2012-05-16 07:14:03
【问题描述】:

这个 jQuery sn-p 最清晰的常用习语是什么?

$('#someTextarea').val( $('#someTextarea').val() + someString );

将原始代码包装在一行函数中感觉很笨拙

编辑:所以我可以传递一个很酷的函数……但我的真正意图是针对 jsfiddles,我目前在其中做这样的事情:

function lazylog (str) { 
    $('#ta').val( $('#ta').val() + str + '\n' );
}
// or
function lazylogPlain (str) {
    document.getElementById('ta').value += str + '\n';
}

// view results of little experiments
lazylog( test1() );
lazylog( test2() );
lazylog( test3() );
// etc...

不知道该上下文是否会产生不同的答案,或者只是让我看起来真的很懒,因为想要输入更少的内容。 console.log 不算,我要textarea。

【问题讨论】:

  • 没有解决在 jsfiddles 中工作的需要,但我喜欢使用 appendVal(string) 方法扩展 jQuery 的想法,该方法在后台利用 val() 同时避免了所描述的笨拙语法。

标签: javascript jquery idioms


【解决方案1】:

不要使用 jQuery。

document.getElementById('someTextarea').value += someString;

将更清晰、更快,并且与 jQuery sn-p 一样好用。如果你真的想使用$选择器,你也可以只用一个元素

$('#someTextarea')[0].value += someString; // least to type

其他可能性是带有函数的.val() 方法

$('#someTextarea').val(function(index, oldValue) { return oldValue + someString; })

或带有.each() 的变体([几乎] 等同于 val() 在内部对文本输入所做的操作):

$('#someTextarea').each(function(){ this.value += someString; })

它们都需要一个你不喜欢的单行函数表达式,但它们的优点是可以为多个选定元素工作(并且不会因为没有匹配的元素而中断),并且它们还返回 jQuery 对象以保留可链接性功能。

【讨论】:

  • 希望我可以两次投票 - 一次是在我编辑之前没有 jquery,另一次是为了 [0] 技巧
  • @ajax333221:见Is jQuery an Array?,这将解释行为。它只是获取与 jQuery 对象关联的第一个 DOM 节点。
【解决方案2】:

你可以传递一个函数:

$(...).val(function(index, old) { return old + whatever; });

【讨论】:

    【解决方案3】:

    我不了解惯用语,但简化此 jQuery 表达式的一种方法是使用 val 的重载,它将函数对象作为参数。 jQuery 会将旧值传递给函数,然后您将新值传回。

    $('#someTextarea').val(function(_, oldValue) { return oldValue + something; }); 
    

    【讨论】:

      【解决方案4】:
      $('#someTextarea').val(function() {
        return this.value + something;
      });
      

      $('#someTextarea').val(function() {
        return $(this).val() + something; 
      });
      

      // mentioned by SLaks, JaredPar
      
      $('#someTextarea').val(function(i, oldVal) {
        return oldVal + something;
      });
      

      【讨论】:

      • val() 有时不仅仅是直接访问 DOM value 属性。
      • @AtesGoral 它总是删除回车符,并且仅在元素为 selectoption 时才起作用
      • 或者你可以通过正确使用val来避免不必要的额外jQuery构造函数,如其他答案所示......
      • 只是好奇:为什么你声称 "$(this).val()" 更好?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-06-23
      • 1970-01-01
      • 2018-07-04
      • 2012-01-08
      • 2011-02-28
      • 2011-03-03
      • 1970-01-01
      相关资源
      最近更新 更多