новичок jQuery: как эффективно сделать несколько действий с тем же элементом DOM?

Я также согласен с тем, что объединение в цепочку - лучший метод для использования, но кое-что еще, ни у кого нет адреса здесь, использует .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 () , используйте его таким же образом.

Every time you use a jQuery function, it returns the full jQuery object from the initial query. This lets you chain actions together, so the actual query only happens the first time.

From your examples, it doesn't look like you ever use previousHtml, so you don't need to grab it at all. I think you can just do this:

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

Yes I would recommend to use chaining, because the jQuery methods usually return the element you modified, so it doesn't need to be looked up in the DOM again. And I find it more readable, too (you know which operations belong to which element).

the two are the same.

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

chaining is exactly the same because jQuery methods return this, the object that they're attached to:

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

you can test this with (myDiv === myDiv.html("bla bla bla"))

to answer your question "which should I use": DRY (Don't Repeat Yourself) would suggest chaining. just don't forget readability (don't lump many method calls into a single line; my recipe for readability is above)

Это зависит от того, какие функции вы вызываете для этого элемента, поскольку не все функции возвращают элемент DOM. Однако, если все функции, которые вы должны вызвать, всегда будут возвращать элемент DOM, это, безусловно, может сделать ваш код более читабельным.

Просто потому, что никто не упомянул об этом, использование вашего первого метода также будет работать и сохранить поиск DOM.

Однако цепочка, как говорили другие, было бы более "правильным" способом использования одного и того же элемента и применения к нему различных действий.

Удачи!