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

Question

我想通过数据属性获取行数，例如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>

Answer 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>

Answer 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>

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

jQuery get length td match data attribute

javascript

jquery

datatables

each

custom-data-attribute