时间戳

首页 > 解决方案 > 为什么我在使用 jQuery 和 JavaScript 时得到不同的结果

javascript - 为什么我在使用 jQuery 和 JavaScript 时得到不同的结果

问题描述

这是我的html代码

<table id="example" class="display" style="width:100%">
    <tbody>
        <tr class="data">
            <td>1</td>
        </tr>
        <tr class="data">
            <td>2</td>
        </tr>
        <tr class="data">
            <td>3</td>
        </tr>
        <tr class="data">
            <td>4</td>
        </tr>
        <tr class="data">
            <td>5</td>
        </tr>
        <tr class="data">
            <td>6</td>
        </tr>
        <tr class="data">
            <td>7</td>
        </tr>
    </tbody>
</table>

我使用带有 jQ​​uery 脚本的 jQuery 数据表

$('#example').DataTable({
    "lengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
    "columnDefs": [
            { type: "num", targets: 0 },
     ]
});

而且我不明白为什么我在下面使用此代码显示2个不同的结果

list= document.getElementsByClassName("data");
console.log(list.length); // 7
$('button').on('click', function() {
    console.log(list.length); //5
});

感谢帮助。

标签： javascriptjquerydatatables

解决方案

你的第一个console.log(list.length);会在之前执行$('#example').DataTable，它会返回7，因为有7带有 class 的行data。

那是因为一旦你应用$('#example').DataTable它只会渲染（显示）5 rows，所以当你使用list.length它时会返回5。

仅供参考-编写时Document.getElementsByClassName()不会cache导致list对象list = document.getElementsByClassName("data");。这意味着当你list.length在里面使用时click它会执行document.getElementsByClassName("data").length。每次使用list它都会一次又一次地扫描整个文档。

参考 - Document.getElementsByClassName()

警告：这是一个实时的HTMLCollection。DOM 中的更改将在更改发生时反映在数组中。如果此数组选择的元素不再符合选择器的条件，它将自动被删除。出于迭代目的，请注意这一点。

推荐阅读