jQuery获取长度td匹配数据属性答案

【问题标题】：jQuery get length td match data attributejQuery获取长度td匹配数据属性
【发布时间】：2021-11-19 01:39:34
【问题描述】：

我想通过数据属性获取行数，例如data-engine与ami匹配3，有什么方法可以获得计数或长度？

注意：ami 的数据引擎值来自 smarty 模板变量。所以，我需要目标数据引擎为ami

$(document).ready( function () {
    $('#table_id').DataTable();
    
     let data_engines = [];
    $('#table_id').find('td[data-engine]').each(function () {
        let data_engine = $(this).attr('data-engine');
        if ($.inArray(data_engine, data_engines) == -1) {
            data_engines.push(data_engine);
        }
    });

    for (let i = 0; i < data_engines.length; i++) {
        let count = $('#table_id').find('td[data-engine="' + data_engines[i] + '"]').length;
        let option_engine = `<option value="${data_engines[i]}">${data_engines[i]} : ${count}</option>`;
        $('.snds').append(option_engine);
    }
} );

<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/fc-4.0.0/sl-1.3.3/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/b-2.0.1/fc-4.0.0/sl-1.3.3/datatables.min.css"/>

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-engine="ami">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Mengo</td>
            <td>Apple 2</td>
        </tr>
         <tr>
            <td data-engine="ciam">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Banana</td>
            <td>Oliv</td>
        </tr>
        <tr>
            <td data-engine="ciam">Oliv</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>
============================================<br>
Dropdown:
<select class="snds" id="aeid">
<option value="ami">ami</option>
<option value="ciam">ciam</option>
</select>

【问题讨论】：

标签： javascript jquery datatables each custom-data-attribute

【解决方案1】：

更新 2：

    let data_engines = [];
    $('#table_id').find('td[data-engine]').each(function () {
        let data_engine = $(this).attr('data-engine');
        if ($.inArray(data_engine, data_engines) == -1) {
            data_engines.push(data_engine);
        }
    });

    for (let i = 0; i < data_engines.length; i++) {
        let count = $('#table_id').find('td[data-engine="' + data_engines[i] + '"]').length;
        let text = `${data_engines[i]} : ${count}`;
        $('.snds').find(`option[value="${data_engines[i]}"]`).text(text);
    }

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-engine="ami">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Mengo</td>
            <td>Apple 2</td>
        </tr>
        <tr>
            <td data-engine="ciam">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Banana</td>
            <td>Oliv</td>
        </tr>
        <tr>
            <td data-engine="ciam">Oliv</td>
            <td>Orange</td>
        </tr>

    </tbody>
</table>
<select class="snds" id="aeid">
    <option value="ami">ami</option>
    <option value="ciam">ciam</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

【讨论】：

查看我的更新！！
你可以通过在里面添加每个选项元素来做到这一点，检查更新
我再次编辑了我的问题。添加了数据表，包括您的脚本。我的下拉菜单已经有选项，只想在选项文本中附加计数。例如existing option : 3 只需附加 : 3 请检查问题。
检查我的更新，这就是你想要的？？
正是我想要的，解决方案接近 90%。它在这里工作，但我不知道不为我工作。当我使用您的脚本时，整个数据表停止工作，控制台中没有错误。当我删除脚本的最后两行时，数据表会恢复。我认为最后两行的语法或符号有问题。

【解决方案2】：

创建一个计数器对象来跟踪计数，然后迭代该对象以更新显示

const engines = {};

$('td[data-engine]').each((i,el) => engines[el.dataset.engine] = (engines[el.dataset.engine]||0) +1)

$.each(engines, (k, v) => $('#engines').append( $('<div>', {text:`Found ${k} :${v}`})))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-engine="ami">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Mengo</td>
            <td>Apple 2</td>
        </tr>
         <tr>
            <td data-engine="ciam">Apple</td>
            <td>Mango</td>
        </tr>
        <tr>
            <td data-engine="ami">Banana</td>
            <td>Oliv</td>
        </tr>
        <tr>
            <td data-engine="ciam">Oliv</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>
============================================<br>
<div id="engines"></div>

【讨论】：