我创建了 html 表,我想通过引用 arr
和其内容
来添加类
当我设置选择器时,我遇到了两个问题。
①$( "td:contains('2')")
选择器选择 2
,12
,22
・・・・ 我想要的结果是只选择 2
② 我准备了arr
,我想用arr
写得更简单。
我想要的结果是添加 arr
单元格类。
有简单的方法可以实现吗?
谢谢
const arr=[1,2,10,11,14]
$( "td:contains('1')" ).addClass('aqua')
$( "td:contains('2')" ).addClass('aqua')
$( "td:contains('10')" ).addClass('aqua')
$( "td:contains('11')" ).addClass('aqua')
$( "td:contains('14')" ).addClass('aqua')
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
<script>
let html = ''
html += '<table>';
let i = 0;
for (let w = 0; w < 10; w++) {
html += '<tr>';
for (let d = 0; d < 10; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
</script>
最佳答案
:contains
无法搜索完全匹配的内容,它只会搜索元素是否在某处包含文本。如果您希望文本完全匹配,请在选择元素后过滤
它们是否为.text() === '2'
:
const arr = [1, 2, 10, 11, 14].map(String);
/*
const getExactMatch = text => function() { return $(this).text() === text };
$("td").filter(getExactMatch('1')).addClass('aqua');
$("td").filter(getExactMatch('2')).addClass('aqua');
or:
*/
$("td")
.filter(function() { return arr.includes($(this).text()); })
.addClass('aqua');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>
<script>
let html = ''
html += '<table>';
let i = 0;
for (let w = 0; w < 10; w++) {
html += '<tr>';
for (let d = 0; d < 10; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
</script>
关于javascript - 如何通过引用 jQuery 中的内容和数组来正确设置选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61037842/