JQuery If Has() Selector Do Stuff
Text jQuery(document). Ready(Function() { If (Jquery('#Bad-Drifting'). Has('Em')) { jQuery('#bad-Drifting'). Css({'Color': 'Red'}); jQuery('#bad-Drifting')...
<ul id="bad-drifting">
<li>text</li>
</ul>
jQuery(document).ready(function() {
if (jQuery('#bad-drifting').has('em')) {
jQuery('#bad-drifting').css({'color': 'red'});
jQuery('#bad-drifting').css({'font-weight': 'bold'});
}
});
jQuery(document).ready(function() {
if (jQuery('#bad-drifting li:has(em)')) { // .has('em')
jQuery('#bad-drifting').css({'color': 'red'});
jQuery('#bad-drifting').css({'font-weight': 'bold'});
}
});
What I want to do is not just set some CSS but make more complicated changes but I can't figure out why this always returns true... Is it a bug or what am I missing?
5 Answers
That's because has returns a jQuery object and an object is a truthy value in JavaScript, you should use length property:
if (jQuery('#bad-drifting').has('em').length) {
You need to check for length because jQuery('#bad-drifting li:has(em)') returns a jQuery object which will be always truthy.
if (jQuery('#bad-drifting li:has(em)').length) { // .has('em')
if (jQuery('#bad-drifting').has('em')[0]) { // do Stuff
I ended up doing like this:
if (jQuery('#bad-drifting em').length > 0) {
console.log('we have some errors');
}
Check the length of your jQuery "collection":
if (jQuery('#bad-drifting li:has(em)').length > 0) { // There is at least one element
otherwise it will always be true, because what jQuery returns is always truthy.
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
