jQuery: Select data attributes that aren’t empty?

Just as further reference, and an up-to-date (may’14) (aug’15) (sep’16) (apr’17) (mar’18) (mar’19) (may’20) (jan’22)… Answer that works with: ###Empty strings: If the attr must exist & could have any value (or none at all) jQuery(“[href]”); ###Missing attributes: If attr could exist & if exist, must have some value jQuery(“[href!=”]”); ###Or both: If attr must … Read more

Changing the child element’s CSS when the parent is hovered

Why not just use CSS? .parent:hover .child, .parent.hover .child { display: block; } and then add JS for IE6 (inside a conditional comment for instance) which doesn’t support :hover properly: jQuery(‘.parent’).hover(function () { jQuery(this).addClass(‘hover’); }, function () { jQuery(this).removeClass(‘hover’); }); Here’s a quick example: Fiddle

jQuery support “:invalid” selector

Using querySelectorAll as suggested by @JanDvorak (and his answer should be accepted for thinking of that), you can write your own expression, making .is(‘:invalid’) valid ? jQuery.extend(jQuery.expr[‘:’], { invalid : function(elem, index, match){ var invalids = document.querySelectorAll(‘:invalid’), result = false, len = invalids.length; if (len) { for (var i=0; i<len; i++) { if (elem === … Read more

:nth-of-type() in jQuery / Sizzle?

/** * Return true to include current element * Return false to exclude current element */ $.expr[‘:’][‘nth-of-type’] = function(elem, i, match) { if (match[3].indexOf(“n”) === -1) return i + 1 == match[3]; var parts = match[3].split(“+”); return (i + 1 – (parts[1] || 0)) % parseInt(parts[0], 10) === 0; }; Test case – (check in … Read more

Find all elements based on ids using regex on jQuery selector

If you were doing this with regex, the expression would simply be: item-\d-top Where the \d indicates any single digit (0..9), and the other characters have no special meaning (so are treated as literals). However, jQuery doesn’t currently have a regex filter (only things like start/end/contains/etc) – so you would have to create your own … Read more

Target elements by class prefix

It is called the Attribute Starts With Selector. My example sets a red text color on the elements: $(‘[class^=”tab”]’).css(‘color’, ‘red’); jsFiddle Demo Please note that if the elements have more than one class and the other precedes the one with tab inside (class=”nyedva tab231891230″) the element won’t be selected by this selector. If you want … Read more