jquery .val() += 成语

Posted 2023-02-22

【中文标题】jquery .val() += 成语

【英文标题】：jquery .val() += idiom

【发布时间】：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() 同时避免了所描述的笨拙语法。

【参考方案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 它总是删除回车符，并且仅在元素为 select 或 option 时才起作用

或者你可以通过正确使用val来避免不必要的额外jQuery构造函数，如其他答案所示......

只是好奇：为什么你声称 "$(this).val()" 更好？