jQuery获取长度td匹配数据属性
jQuery get length td match data attribute
我想通过数据属性获取行数,例如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>
更新 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>
创建一个计数器对象来跟踪计数,然后迭代该对象以更新显示
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>
我想通过数据属性获取行数,例如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>
更新 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>
创建一个计数器对象来跟踪计数,然后迭代该对象以更新显示
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>