如何使用 += 运算符

Question

自从我开始使用JQuery，一直想知道这个运算符在JQuery中是如何工作的。

示例：

for(var i = 0;i<=4;i++)
{
document.getElementById("mydiv").innerText += i;//<- works as expected
}

//results will be 0,1,2,3,4

但是如果我使用jQuery，我不知道如何做到这一点。

for(var i = 0;i<=4;i++)
{
$("mydiv").text(+i)//<- NO!
$("mydiv").text+(i)//<- NO!
$("mydiv").+text(i)//<- JAJA COME ON!
$("mydiv").text(i)+//<- I guess that was stupid


}

- Misters

Answer 1

这样做是不可能的。与 innerText 不同，text() 是一个方法而非属性。

尝试使用：

$("mydiv").text($("mydiv").text() + i);

或者，如果您不想对$("mydiv")进行两次引用，可以这样做：

$("mydiv").text(function(i,v){
   return v + i; 
});

- Curtis

---

这就是为什么我有时不喜欢JQuery的原因 :( - Stasel

这不是jQuery的方式。 - Bergi

@Bergi 不是很清楚，但你是对的，有一种更简洁的方法。我已经修改了我的答案。 - Curtis

@Stasel 这不应该成为不喜欢jQuery的理由。与InnerText不同，text()不是一个属性，而是一个方法。 - Curtis

Answer 2

你只需要在这里使用jQuery。使用text方法提取值，然后再次调用它来设置新值：

for(var i = 0;i<=4;i++)
{
    var mydiv = $("mydiv"),
        t = mydiv.text();
    mydiv.text(t + i);
}

- Justin Ethier

---

不要两次调用相同的选择器表达式。 - Bergi

Answer 3

您不能使用这样的快捷方式来调用jQuery方法，它只适用于本地赋值运算符。对于jQuery .text()，请使用回调函数：

$("#mydiv").text(function(index, oldtext) {
    return oldtext + i;
});

这个回调函数适用于所有 jQuery 属性 "赋值"，无论是 .html、.val、.prop、.attr、.css 还是 .text。

- Bergi

Answer 4

jQuery不是一种编程语言，而是建立在javascript之上的库，因此，规则完全与使用javascript时必须遵循的规则相同，而javascript并没有被设计为理解这些结构。

---

编辑

当然，我是指o.m(+1)不会增加o.p的值，而o.p++和o.p+=1会：

var o = {};
o.p = 1;
o.m = function () { return this.p; };
o.m(+1); // o.p equals 1
o.p++;   // o.p equals 2
o.p+=1;  // o.p equals 3

- user1636522

Answer 5

像其他答案所指出的那样，jQuery只是一个框架，和任何JavaScript代码一样遵循相同的语法规则。

虽然我看到了将一个function传递给.text()的优点，但我不认为这是解决你的真正问题（如何在使用函数而不是变量时连接文本）的通用方法。

我会倾向于使用Array.join()进行高效的连接：

var textParts = [ $("mydiv").text() ];
for(var i = 0;i<=4;i++)
{
    textParts[textParts.length] = i;
}
$("mydiv").text(textParts.join(',')) // result: '...,1,2,3,4'

如果您更喜欢函数方法而不是循环，您也可以使用Array.map()。

据我所知，DOM函数相当慢，因此最好先进行连接，然后再设置div节点值。

- Antoine Lassauzay