<ul> <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.
