我有以下 HTML:
<div id="wrapper">
<div id="a_12"></div>
<div id="a_13"></div>
<div id="a_14"></div>
<div id="a_15"></div>
<div id="a_16"></div>
<div id="a_17"></div>
</div>
如何使用 jQuery 选择以 15 结尾的 div?
最佳答案
使用 attribute-ends-with 选择器:
$('div[id$="15"]');
$('div[id$="15"]').css('color', '#f90');
div {
border: 1px solid #000;
width: 50%;
margin: 0 auto 0.5em auto;
}
div[id]::before {
content: attr(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="a_12"></div>
<div id="a_13"></div>
<div id="a_14"></div>
<div id="a_15"></div>
<div id="a_16"></div>
<div id="a_17"></div>
</div>
或者,您可以使用filter()
:
$('div').filter(function(){
return this.id.slice(-2) == '15';
});
$('div').filter(function() {
return this.id.slice(-2) == '15';
}).css('color', '#f90');
div {
border: 1px solid #000;
width: 50%;
margin: 0 auto 0.5em auto;
}
div[id]::before {
content: attr(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="a_12"></div>
<div id="a_13"></div>
<div id="a_14"></div>
<div id="a_15"></div>
<div id="a_16"></div>
<div id="a_17"></div>
</div>
或者,使用纯 JavaScript:
document.querySelector('div[id$="15"]').style.color = '#f90';
document.querySelector('div[id$="15"]').style.color = '#f90';
div {
border: 1px solid #000;
width: 50%;
margin: 0 auto 0.5em auto;
}
div[id]::before {
content: attr(id);
}
<div id="wrapper">
<div id="a_12"></div>
<div id="a_13"></div>
<div id="a_14"></div>
<div id="a_15"></div>
<div id="a_16"></div>
<div id="a_17"></div>
</div>
或者甚至只使用 CSS:
div[id$="15"] {
color: #f90;
}
div {
border: 1px solid #000;
width: 50%;
margin: 0 auto 0.5em auto;
}
div[id]::before {
content: attr(id);
}
div[id$="15"] {
color: #f90;
}
<div id="wrapper">
<div id="a_12"></div>
<div id="a_13"></div>
<div id="a_14"></div>
<div id="a_15"></div>
<div id="a_16"></div>
<div id="a_17"></div>
</div>
引用文献:
- CSS: JavaScript:
- jQuery:
- Attribute-ends-with (
[attribute$="value"]
) selector . -
filter()
.
关于jquery - 通过最后两个字符定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19015221/