Скачать или смотреть How to Specify Conditions While Building an Array in jQuery: Excluding Certain Words and micro

Learn how to filter links in jQuery to include those with the word `micro` while excluding any that contain `and`.
---
This video is based on the question https://stackoverflow.com/q/64885974/ asked by the user 'CuriousDev' ( https://stackoverflow.com/u/1089173/ ) and on the answer https://stackoverflow.com/a/64885986/ provided by the user 'CertainPerformance' ( https://stackoverflow.com/u/9515207/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Specifying conditions while building an Array in jQuery

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Filtering Array Elements in jQuery: A Practical Guide

When working with jQuery, especially with link selection, you may find yourself needing to filter elements based on specific criteria. For instance, you might want to create an array of links that includes the word "micro," but excludes any link that contains the word "and." This is a common scenario, and knowing how to effectively manage your selections can streamline your web project considerably.

The Problem: Creating an Array with Specific Conditions

Let's say you have the following links on your website:

https://xyz.com.com/2018/05/07/avoid-... // Allowed

https://xyz.com.com/2018/09/07/avoid-... // Reject

https://xyz.com.com/2018/02/17/avoida... // Reject

https://xyz.com.com/2018/05/07/avoid-... // Allowed

You have successfully written the following jQuery code to select all links containing the word "micro":

[[See Video to Reveal this Text or Code Snippet]]

However, you need to refine this selection by filtering out any links that also include the word "and." This adds an extra layer of complexity to your jQuery selection but can be handled with jQuery's powerful selectors.

The Solution: Using :not Pseudo-Selector

To achieve your desired selection, you can leverage the :not pseudo-selector. This powerful feature allows you to exclude certain elements from your selection criteria. Here's how you can structure your jQuery command:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code:

**$('a[href*="micro"]')**: This part selects all <a> tags whose href attribute contains the word "micro."

**:not([href*="and"])**: This excludes any <a> tags whose href attribute contains the word "and."

.css({ color: 'orange' }): This adds a style to the filtered links, changing their color to orange as a visual indicator.

Vanilla JavaScript Alternative

While jQuery provides a convenient way to handle these selections, you might also prefer using vanilla JavaScript. Here's how the filtering could look using standard JavaScript:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Vanilla JS code:

document.querySelectorAll: This native method fetches all anchor tags that match the specified criteria.

for...of loop: This takes each selected anchor element and applies styling through a.style.color = 'orange';

Conclusion

By knowing how to filter links effectively with jQuery—and even using vanilla JavaScript—you can have greater control over your selections, ensuring that only the desired elements are acted upon. The ability to include and exclude specific terms enhances your ability to manipulate web content dynamically and presents a cleaner interface to your users.

With this knowledge in hand, you're better equipped to handle similar filtering tasks in your web development projects!