Question

我实际上正在使用Jquery，并且在某些时候我使用Jquery选择器来使我的页面工作。这里的问题是我使用的HTML可能会变长，这取决于我使用的数据，它看起来像这样。

HTML

<div class="mailing"></div>
    <input type="text" class="mail_subject"/>
    <input type="text" class="mail_body"/> <!-- I can have 1 to n number of these -->

    <!-- Preview tags -->
    <p class='main_subject'></p>
    <p class='main_body'></p>

    <!-- 
        And a few more things we don't use here 
    -->
</div>

<div id="table1">
    <table id="ranking">
        <tbody>
            <!-- Data, can have 0 to ~3500 rows -->
        </tbody>
    </table>
</div>

正如您所看到的，我的网页或多或少分为两部分，<div class="mailing">，其中包含一些表单，以及<div id="table1">，用于显示大量数据。

在我的邮件div中，我有一些输入和一个自动更新的预览，它从输入中获取数据。我在这里有一种邮件建设者＆＃34;预览给我带有html格式的结果。

这里的问题是关于性能，我的JQuery因表格而变慢而且当我输入表单时我遇到了延迟而且我不想让它搜索整个文档，因为我已经知道我的数据将在邮寄div。

JS

$('.mailing').on('change click keyup keydown', function () {
    // Here I append the mail_subject input to the preview
    var text = $(this).val();
    $('.main_subject').text($('.subject_select').val());

    // Here I append each mail_body input to the preview
    $('.bodies_select').each(function () {
        text = $(this).val();
        /*
         * Some computation for the text
         */
        jQuery('<span/>', {text: text}).appendTo('.main_body');
    });
});

我还有一些像ses这样的函数和一些更多的计算，但我想我们已经了解了我的代码是什么样的。

我的问题是，当我使用$('.main_subject')或$('.bodies_select')之类的JQuery选择器来搜索整个DOM文档但仅在我的mailing div中时，有没有办法呢？问题是我可以将我的元素存储在变量中，因为它有多次更新。

Answer 1

您可以使用jQuery上下文来提高性能：

$('.bodies_select', '.mailing')

http://api.jquery.com/jquery/#jQuery1

您甚至可以使用某些技术优化选择器：

https://learn.jquery.com/performance/optimize-selectors/

Answer 2

当然，你只需要在

之前放置父元素

$('.mailing .main_subject')

您应该阅读一些关于选择器的内容 https://api.jquery.com/category/selectors/

JQuery选择器，部分DOM搜索性能

HTML

JS

2 个答案: