低效的 jQuery 使用

Inefficient jQuery usage

本文关键字：使用 jQuery      更新时间：2023-09-26

所以我有这个代码：

$( "#contact_seller .modal-content").addClass('has-error');
$( "#contact_seller span").empty();
$( "#contact_seller textarea" ).focus().after( "<span>Please be more precise about what You want to ask</span>" );

但Webstorm指出，这是低效的jQuery使用。尽管我阅读了很多内容，但我需要 ise .find（） 以使代码更短。所以我在想它需要这样：

$( "#contact_seller")
            .find('.modal-content').addClass('has-error')
            .find('span').empty()
            .find('textarea').focus().after( "<span>Please be more precise about what You want to ask</span>" );
但是很明显，

这段代码无法正常工作（我假设find（）选择每个下一项，但我希望它只选择父元素）。

应该如何正确编写此代码？

作为end的替代品，您可以随时...

var container = $("#contact_seller"); 
container.find(".modal-content").addClass("has-error");
container.find("span").empty();
container.find("textarea").focus().after("<span>Please...</span>");
缺少

end()调用。这应该有效：

$( "#contact_seller")
        .find('.modal-content').addClass('has-error').end()
        .find('span').empty().end()
        .find('textarea').focus().after( "<span>Please be more precise about what You want to ask</span>" );

试着像下面这样写，

var elem = $( "#contact_seller");
elem.find(".modal-content").addClass('has-error');
elem.find("span").empty();
elem.find("textarea").focus().after( "<span>...</span>" );

您可以使用 .end() ，但此代码会更有效end()因为它将执行反向查找，并且在您的上下文中是一个额外的负担。

相关文章：