jquery .val() += idiom

Question

这个 jQuery 代码段最清晰常用的习语是什么？

$('#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 不算，我想要的是文本区域。

- gruntlr

---

不涉及在jsfiddles中工作的需求，但我喜欢使用appendVal(string)方法扩展jQuery的想法，该方法在避免描述中笨拙的语法的同时利用了val()。 - Tim M.

Answer 1

不要使用jQuery。

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

这段代码将更清晰、更快速，而且与 jQuery 代码片段一样有效。如果你真的想要使用 $ 选择器并且只有一个元素，你也可以：

$('#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对象以保留链式调用特性。

- Bergi

---

希望我能点赞两次——一次是在我编辑之前没有使用 jQuery，另一次是使用 [0] 技巧。 - gruntlr

请参考 Is jQuery an Array? 了解相关行为。它只获取与jQuery对象相关联的第一个DOM节点。 - Bergi

Answer 2

您可以传递一个函数：

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

- SLaks

Answer 3

我不知道这是否符合惯用语的说法，但是简化这个jQuery表达式的一种方法是使用重载val函数，该函数将函数对象作为参数。jQuery会将旧值传递给函数，您将新值传回。

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

- JaredPar

Answer 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;
});

- thecodeparadox

---

val() 有时比直接访问 DOM 的 value 属性更强大。 - Ates Goral

@AtesGoral它总是删除换行符，并且只在元素为select或option时才会进行处理。 - Esailija

或者你可以避免使用多余的jQuery构造函数，而是正确地使用“val”，正如其他答案所示... - lonesomeday

只是好奇：为什么你认为"$(this).val()"更好？ - Bergi