jquery 新手：如何有效地对同一个 DOM 元素执行多个操作？答案

【问题标题】：jquery newbie: how to efficiently do multiple actions on same DOM element?jquery 新手：如何有效地对同一个 DOM 元素执行多个操作？
【发布时间】：2009-12-11 17:12:12
【问题描述】：

我最近了解到（在 stackoverflow 上：））每次写作时都使用 jquery

$("...")

执行 DOM 搜索以定位匹配元素。我的问题很简单：如何在我用 jquery 定位的 DOM 元素上有效地执行一系列操作（使用 jquery 对象的好方法）？目前，我正在做（例如）：

var previousHtml = $("#myDiv").html();
$("#myDiv").addClass("tangoClass");
$("#myDiv").html("bla bla bla");
//...

基本上，我总是通过编写 $("#myDiv") 来引用元素。如何以有效的方式重复操作 DOM 元素（使用 jquery 函数，而不是 vanilla Javascript）？以下是否避免了昂贵的 DOM 搜索？

var myDiv = $("#myDiv");
var previousHtml = myDiv.html();
myDiv.addClass("tangoClass");
myDiv.html("bla bla bla");

或者我是否应该尝试尽可能多地链接 jquery 调用，例如：

var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call
$("#myDiv").html("bla bla bla");

感谢您的任何见解。 :)

拉拉

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

我也同意链接是最好的使用方法，但这里没有人知道的其他东西是在链接时使用.andSelf()(1) 和.end()(2)。

以下将“边框”类添加到其中包含的div 和p。

$("div").find("p").andSelf().addClass("border");

使用.end()“重置”选择器

$("div")
  .find("p").addClass("myParagraph").end()
  .find("span").addClass("mySpan");

更新：.andSelf() 已被弃用，实际上已重命名为 .addBack()，请以相同的方式使用它。

【讨论】：

【解决方案2】：

每次使用 jQuery 函数时，它都会从初始查询中返回完整的 jQuery 对象。这使您可以将操作链接在一起，因此实际查询仅在第一次发生。

从您的示例来看，您似乎从未使用过 previousHtml，因此您根本不需要抓取它。我认为你可以这样做：

$("#myDiv").html('bla bla bla').addClass('tangoClass');

【讨论】：

lo_flye，谢谢！获取 previousHtml 只是作为对 jquery 对象的附加操作。有时不可能链接所有操作，因为一些 jquery 函数不返回 jquery 对象（例如，.attr()）。在这些情况下，将 $() 对象存储在一个变量中，然后对该变量执行操作就相当于链接它触发的查找，对吧？

【解决方案3】：

这取决于您在该元素上调用的函数，因为并非所有函数都会返回 DOM 元素。但是，如果您必须调用的所有函数都将始终返回 DOM 元素，那么它肯定会使您的代码更具可读性。

【讨论】：

谢谢你，jvilalta！这正是我在 lo_flye 回复下发表的评论中所关心的问题。在这些情况下，我只会将 $("...") 返回的对象存储在 var 中。
严格来说，jQuery 函数从不返回 DOM 元素——它们返回的 jQuery 对象可能包含一个或多个 DOM 元素的数组。

【解决方案4】：

是的，我建议使用链接，因为 jQuery 方法通常会返回您修改的元素，因此不需要再次在 DOM 中查找。而且我也发现它更具可读性（你知道哪些操作属于哪个元素）。

【讨论】：

【解决方案5】：

只是因为没有人提到它，所以使用您的第一种方法也可以工作并保存 DOM 搜索。

但是，正如其他人所说，链接将是使用相同元素并对其应用不同操作的更“正确”方式。

祝你好运！

【讨论】：

【解决方案6】：

两者是一样的。

var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById,
                         // wraps the DOMElement, returns the wrapper.
myDiv.addClass("tangoClass"); // obviously reuses the object
myDiv.html("bla bla bla"); // ditto

链接完全相同，因为 jQuery 方法返回 this，它们附加到的对象：

myDiv
    .addClass("tangoClass")
    .html("bla bla bla")
;

您可以使用 (myDiv === myDiv.html("bla bla bla")) 进行测试

回答“我应该使用哪个”的问题：DRY（不要重复自己）建议使用链接。只是不要忘记可读性（不要将许多方法调用集中在一行中；我的可读性秘诀在上面）

【讨论】：