jquery新手:如何在同一个DOM元素上有效地执行多个操作？

Question

我最近学到了(这里在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");

感谢您的任何见解.:)

拉拉

Answer 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(),以相同方式使用它.

Answer 2

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