Update variable with "exception list"

JavaScript
1

I am blanking on something I think should be easy.

I have a variable in jquery that references an HTML element. This variable can catch many elements on a page. I want an array created in my code that basically works like so: If a class name in the array is one of the elements in the variable, I don’t want it included. So I have this setup

import var from xyz
var.each() {
  //stuff
});

I wanted to see about doing some sort of filter after the import
var = var.filter

I’m not sure if this is the best way or within the .each() to just check whether it has one of the classes. Any help is appreciated! Thanks.

2

Been a minute since I’ve used jquery but I seem to recall using it like this to filter it out before I looped through it.

var.filter(function(term) { return term != 'xyz'); }.each() { .... }

3

I always found .each to be extremely clunky. It expects you to define a proper function inside the each, which takes a parameter (the index). Inside that function, but only if properly declared as a function, not big-arrow notated, $(this) refers to the element from the selector.

“one of the elements in the variable”? I feel like i need a better demonstration of desire to help further…

4

Hm so you mean you have a jQuery collection containing say div.foo and div.bar, and an array of strings like ['bar', 'baz'], you want the resulting array to only contain 'baz' since this is not a class of any of the HTML elements? This could be achieved like so then:

const $elements = $('div')
const classNames = ['bar', 'baz']

const result = classNames.filter(
  name => !$elements.hasClass(name))

Well the callback actually receives the element as the 2nd parameter… but why on earth they’re using the reverse parameter order of the regular array methods I fail to comprehend. oO

5

As I recall, Jquery’s each method was created long before JS introduced higher order methods for arrays. At the time we were using standard for loops to iterate through html collections.

2 Likes
6

You can use the not() method in jQuery to exclude certain elements from a selection based on their class names. Here’s an example of how you can use it:

var excludedClasses = ["class1", "class2", "class3"];
var selectedElements = $("#your-element").not("." + excludedClasses.join(",."));

This code selects all elements with the id “your-element” and then excludes any elements that have a class name that is in the “excludedClasses” array. The not() method takes a string argument that is a selector, in this case, it’s a class selector. The join() method is used to join the array elements with a . (dot) and a , (comma) separator.

You can also use the filter() method to filter the elements in a similar way.

var selectedElements = $("#your-element").filter(function(){
    return !excludedClasses.includes(this.className);
});

This code selects all elements with the id “your-element” and then filters the elements that have a class name that is not in the “excludedClasses” array. The filter() method takes a function as an argument, this function is passed with each element of the selection, and it should return true if the element should be included in the filtered selection, and false if not.

You can use either of the above methods, depending on your use case, to exclude certain elements from a selection based on their class names. Also, you can use the .each() method to check whether it has one of the classes, but it would be less efficient, as the not() and filter() methods will filter the elements out of the selection before the loop.

var.each(function(){
  if(!excludedClasses.includes(this.className)){
    // do something with the element
  }
});

Please let me know if you have any questions or if there’s anything more I can help you with.

2 Likes
7

If the goal is to exclude elements with the given class names, the css :not selector can just not select them in the first place, with or without jquery.

9

I’m sorry for the delay in responding.

Let’s say I have many slideshows on a page. Let’s say a feature of all these slideshows is the existence of a class slideshowClass

More classes can be added manually but slideshowClass comes by default on all of them. I’m doing some custom stuff to slideshowClass but there may be some custom treatments that get created that should not have my custom stuff applied to. Thus, this exception list is created.

This is most certainly an option, but for reasons I won’t bother getting into, it’s not ideal to do this idea.

@usamaererer 's code looks like what I need. I’ll test this out shortly :slight_smile: .

10

Hmm, still having a bit of issues. I filled out the excludedClasses array with 2 custom classes. I put 3 elements on a page. 2 of the 3 should technically be excluded, but my console logs let me know that nothing is being excluded.

const excludedClasses = [
	'custom-slideshow',
	'another-class'
];
...
if(!$(target).parents(".fsSlideshow").not("." + excludedClasses.join(",."))) {
						console.log("if here");
					} else {
						console.log("else here");
					}

Any idea? I’d expect either 2 if here or else here’s, but I get 3 else here’s :confused: .

11

I should also add that these excludedClass’s should exclude the element even if the element only has 1 class matching the array. So if I have excludedClass with 5 classes, and an element has 1 of those 5 classes, that’d be excluded.

12

Think I got it

if(!excludedClasses.some(x => [...$(target).parents(".fsSlideshow")[0].classList].includes(x))) {
					//does not contain any excluded classes, so let's run stuff
				}
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.