jQuery get length td match data attribute

Question

I would like to get row count by data attribute, for example, data-engine with ami match 3 , what method could possible to get count or length?

Note: the data-engine value as ami come from a smarty template variable. So, i need target data-engine instated of 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

Update 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

Create a counter object to track counts then iterate that object to update the display

 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>