jquery-selectors - w3toppers.com

jQuery how to find an element based on a data-attribute value?

You have to inject the value of current into an Attribute Equals selector: $(“ul”).find(`[data-slide=”${current}”]`) For older JavaScript environments (ES5 and earlier): $(“ul”).find(“[data-slide=”” + current + “”]”);

jQuery selector regular expressions

You can use the filter function to apply more complicated regex matching. Here’s an example which would just match the first three divs: $(‘div’) .filter(function() { return this.id.match(/abc+d/); }) .html(“Matched!”); <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <div id=”abcd”>Not matched</div> <div id=”abccd”>Not matched</div> <div id=”abcccd”>Not matched</div> <div id=”abd”>Not matched</div>

Should all jquery events be bound to $(document)?

No – you should NOT bind all delegated event handlers to the document object. That is probably the worst performing scenario you could create. First off, event delegation does not always make your code faster. In some cases, it’s is advantageous and in some cases not. You should use event delegation when you actually need … Read more

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that: In HTML: <span>foo</span> In jQuery: $(‘span’).hover(function(){ $(this).attr(‘data-content’,’bar’); }); In CSS: span:after { content: attr(data-content) ‘ any other text you may want’; } If you want to prevent the ‘other text’ from showing up, you … Read more

How can I select an element with multiple classes in jQuery?

If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between: $(‘.a.b’) The order is not relevant, so you can also swap the classes: $(‘.b.a’) So to match a div element that has an ID of a with classes b and … Read more

How to get the children of the $(this) selector?

The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection. jQuery(“img”, this); Which is the same as using .find() like this: jQuery(this).find(“img”); If the imgs you desire are only direct descendants of the clicked element, you can also use .children(): jQuery(this).children(“img”);